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 :).
