Question

I want to be able to have default text like “Enter content here…” appear when the editor first loads, but I want this text to disappear when the user clicks/focuses on the content area. Then, if they “blur” (move out) of the content area without inputting anything, I want the “default text” to re-appear in the editor.

After Googling and looking through TinyMCE’s wiki, it looks like there are onActivate and onDeactivate events that should partially do this; however, the wiki page for onDeactivate has a disclaimer stating that it is not a true “blur” method, plus I was not able to get the onActivate events to work (using FF 3.5 at least).

Has anyone else found a solution to this? I’m using a stock TinyMCE install and have jQuery loaded for my other JS tasks for the site I’m building, so I’m open to some jQuery wizardry to make this happen if there’s nothing available in the TinyMCE API.

Thanks,
Seth

Answer 1

the onNodeChange tinyMCE event will fire if the user tabs into the editor. use tinyMCE’s onMouseDown to detect a click. between these two events you should be able to determine when the user has activated the editor. use $(body).click() in the main page to determine when the user clicks out of the editor and blurs it.

i would also shy away from putting the default text as the actual value of the editor. instead, i would make the iframe/body of the editor be transparent and put the default value behind it in an absolutely positioned div. using the above triggers, just show()/hide() that div when you want the default value to [dis]appear.