Question

I’m using Remy Sharp’s jQuery plugin to display hints in text boxes.

I’d like to do the same with TinyMCE – display a hint, like "Type some text here.", and when the user focuses the TinyMCE editor, that text should go away. If the editor is empty (no text entered), then on blur the text should be visible again.

Is there a jQuery plugin that is capable of doing this? Or is there an API in TinyMCE that I could use for this functionality?

Answer 1

TinyMCE should pass through any content already in the textarea, so

<textarea name="content" id="content">Type some text here</textarea>

should display that text, then with jQuery you should be able to do something like:

TinyMCE.focus(function(){
 if ($(this).getContent() == "Type some text here"){
  tinyMCE.setContent("");
 } else if ($(this).getContent() == ""){
  tinyMCE.setContent("Type some text here");
 }
})

I haven’t tested it, but getContent & setContent is what you need from the tinyMCE api… not sure if the .focus() will work right. TinyMCE replaces the textarea with an iframe, so you’re not actually typing into the textarea anymore…