Does TinyMCE have useful focus / event blur content?
I want to have a default text like "Enter content here ..." when the first editor loads, but I want that text to disappear when the user clicks / focuses on the content area. Then, if they "blur" (go out) out of the content area without typing anything, I want the "default text" to appear in the editor again.
After Googling and looking at the TinyMCE wiki, it looks like the onActivate and onDeactivate events should partially do this; however, the wiki page for onDeactivate has a caveat that this is not a true blur method, plus I was unable to get the onActivate events to work (using at least FF 3.5).
Has anyone else found a solution? I am using the TinyMCE installation and loading jQuery for my other JS tasks for the site I am building, so I am open to some jQuery mastery to make this happen if there was nothing in the TinyMCE API.
Thanks, Seth
source to share
tinyMCE event onNodeChange
will fire if user tabs into editor. use tinyMCE onMouseDown
for click detection. in between these two events, you will be able to determine when the user has activated the editor. use $(body).click()
on the master page to detect when the user clicks out of the editor and erases it.
I am also avoiding typing the default text as the actual value of the editor. instead I would make the iframe / body of the editor transparent and put the default in an absolutely positioned div. using the above triggers just show () / hide () that div when you want the default to be [dis].
source to share
Hmmm, difficult ...
here is an idea you could try:
We've established that onActivate
works great, so plug in the code for this ... now, for onDeactivate
...
tinyMCE saves its contents in the original (now hidden) text box that it replaces. This is how the content is sent to the server when the form is submitted.
Now, to blur the editor, the user has to click on something else on the page. using jQuery you can attach a function $("body").click()
that checks the content of the hidden text area (using $(id_of_hidden_textarea).val()
). If the content is empty, set it to "Enter content here ..." content in the textbox (using val()
) and an MCE instance (using tinyMCE.setContent()
).
The function $("body").click()
does not run when clicking on the editor because it is in an iframe.
source to share