Archive for the 'JavaScript' Category

Modifying a TinyMCE-powered Textarea

Travanj 18, 2006

TinyMCE is a great WYSIWYG JavaScript control which can easily convert any textbox on your site to a powerful WYSIWYG editor. The problem with TinyMCE is that it limits you – it filters out the HTML code, trying to keep the code it generates clean and standards-compliant.

Although there's really nothing wrong with that (it's nice actually), it causes trouble when you try to edit the textbox (using the DOM) from anything outside of TinyMCE – your own JavaScript, for instance – and refuses to insert any HTML into the textbox.

The workaround? Disable TinyMCE, make and apply your modifications and enable it again:

tinyMCE.execCommand("mceRemoveControl", false, elemid);
tinyMCEmode = false;
// the code for manipulating the text box
tinyMCE.execCommand("mceAddControl", false, elemid);
tinyMCEmode = true;

Note that you should replace the "elemid" variable with the ID of the HTML element you're modifying.

This also works from a popup window (assuming it has been opened by the page which contains the HTML element you want to modify): 

window.opener.tinyMCE.execCommand("mceRemoveControl", false, elemid);
window.opener.tinyMCEmode = false;
// the code for manipulating the text box
window.opener.tinyMCE.execCommand("mceAddControl", false, elemid);
window.opener.tinyMCEmode = true;

The same note for "elemid" applies here, too. 

There you go… And it wasn't that hard, either :).