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


Jedan odgovor to “Modifying a TinyMCE-powered Textarea”

  1. Idetrorce Says:

    very interesting, but I don’t agree with you


Popunite niže tražene podatke ili kliknite na neku od ikona za prijavu: Logo

Ovaj komentar pišete koristeći vaš račun. Odjava /  Izmijeni )

Google+ photo

Ovaj komentar pišete koristeći vaš Google+ račun. Odjava /  Izmijeni )

Twitter picture

Ovaj komentar pišete koristeći vaš Twitter račun. Odjava /  Izmijeni )

Facebook slika

Ovaj komentar pišete koristeći vaš Facebook račun. Odjava /  Izmijeni )


Spajanje na %s

%d bloggers like this: