Turning TinyMCE On and Off On the Fly
WYSIWYG tools like TinyMCE are great and can make formatting HTML text areas a breeze. Nonetheless, they can also do some things that you occasionally don't want. For instance, TinyMCE often "cleans" your code in ways that you may not intend or want. to solve this, I recently added a feature to my Mango Blog installation that allows me to not only turn TinyMCE on and off, but also remembers my preference (on a field by field basis) when I return. Keep in mind that not only is this solution not Mango specific; it is not ColdFusion specific. In fact, it only takes a little JavaScript.
TinyMCE Initialization
The first thing you need to do is set your TinyMCE initialization script to not load up TinyMCE automatically. This is done because, as I said, we intend to remember your last preference for each and every text field. So, let's say Form A has two HTML text fields, not only will I be able to turn each one off independently, but it will remember my choices when I return, independently. Thus, you need to set mode to "none" within the TinyMCE initialization script. This makes TinyMCE intialize with your settings but not add itself to any fields by default.
Saving the Cookies via JavaScript
The next step is to add this Quirksmode script to the header of any pages that will use or allow TinyMCE. The script at this page has functions to make it easier to read and set cookies in JavaScript. We will use these to set cookies for each field that will allow TinyMCE. In my script, I don't set an expiration date on the cookies which means that my setting will only last for this browser session. Be sure to change to set the expiration if you wish your page to remember these settings across browser sessions.
Turning TinyMCE On/Off When the Page Loads
If you load the pages with the above code set, TinyMCE will appear nowhere. In my case, I wanted TinyMCE to show up on the HTML text fields by default and then be turned off. The first part of this is defaulting my cookie for that field field to true and then having a script add TinyMCE to that field if its cookie is true. My cookie names are based upon a prefix (I put "tinyMCE") and then the form field ID (since this, as we will see, is how TinyMCE is added to a field). Below is an example of the script you would at at the bottom of the page where you want TinyMCE added (so in this example, my form field ID is "contentField").:
if (readCookie("tinyMCEcontentField") == null) {
createCookie("tinyMCEcontentField","true");
}
if (readCookie("tinyMCEcontentField") == "true") {
toggleEditor("contentField");
}
Toggle TinyMCE
The last step is to take a the JavaScript I borrowed from here and modify it slightly to set our cookie preferences. You will notice I just append the ID to my prefix noted above when setting the cookie.
function toggleEditor(id) {
if (!tinyMCE.getInstanceById(id)) {
tinyMCE.execCommand('mceAddControl', false, id);
createCookie("tinyMCE" + id,"true");
}
else {
tinyMCE.execCommand('mceRemoveControl', false, id);
createCookie("tinyMCE" + id,"false");
}
}
Now all you need to do is add a link (or button) to your form to call our function and allow us to turn TunyMCE on and off. To do this you simply call the function and pass the ID of the content text field you are adding/removing TinyMCE to like toggleEditor('contentField');
