Toggle tinyMCE
Posted on November 8th, 2007 | by dade |
To have tinyMCE toggle-able, it needs to be initiated using the ‘none’ mode option i.e.
tinyMCE.init({
mode : “none”
})
Two methods of the class will then come in handy. The first method adds the editor instance when a button is clicked (or any other specified event occurs) while the second method removes the editor instance.
First Method: tinyMCE.addMCEControl(element to be toggled, id given to the editor instance);
Where element to be toggled is the element that will be converted to the tinyMCE instance and the other parameter is the id to be given to the editor instance. This parameter is useful because it will be used in getting a handle on the editor when it is to be removed. Specify any string for this parameter. Second method removes the editor instance
Second Method:tinyMCE.removeMCEControl(id of the editor)
Where id of the editor is used in determining the editor instance to remove and it can be returned by this method: tinyMCE.getEditorId(EditorsID) where EditorsID is the second parameter that was specified for the tinyMCE.addMCEControl() method. I.e. it is the id given to the editor.
Having seen the two methods, here is how the final offering will look like:
var tinyMCEmode = false;
function toggle(editorsId)
{
//check if there is already an instance of the editor
if (tinyMCEmode)
{
//if yes then remove it
tinyMCE.removeMCEControl(tinyMCE.getEditorId(editorsId));
//indicate that editor has been removed
tinyMCEmode = false;
}
else
{
//add the editor instance
tinyMCE.addMCEControl(document.getElementById(’geekabyte’), editorsId);
//indicate that editor has been added
tinyMCEmode = true;
}
}
Where ‘geekabyte’ is the id given to the html element that will take on the editor instance. The HTML attached to the following script may look like this:
<body>
<div id=’geekabyte’>
</div>
<form>
<input type=’button’ value=’toggle’ onclick=’toggle(”newgeekabyte”)’/>
</form>
TinyMCE is a small WYSIWYG editor control for web browsers such as MSIE or Mozill that enables the user to edit HTML and TEXT contents in a more user friendly way. Get more information on tinyMCE
Culled and adapted from geekabyte
