Downloaded
tinyMCE (V.2.0.8) and went straight to the docs to see if or better still how I can initiate the editor instance such that it toggles on and off with the clicking of a button or another event for that matter.
After going through the docs that came with the download, learnt that the editor instance is initiated with the following codes:
tinyMCE.init({
mode : "textareas"
})And the mode determines the method I have for calling the editor instance. So I looked further to see the different options/modes that I have. According to the docs I have just three options which are:
- textarea: which converts all textarea elements to editors when the page loads.
- specific_textareas: Converts all textarea elements with the ‘textarea_trigger’ attribute set to "true".
- Exact: Converts only explicit elements, these are listed in the elements option. These elements can be any kind for example textareas or divs.
Which, apparently does not include any option for what I want to achieve; a toggle-able text editor instance. After further ransacking through the docs I realized that there was no provision for what I wanted, I decided I was left with one option; which is to tweak the codes to get what I wanted.
So I looked at the initiating code and since it’s just Javascript, I thought if I wrap it in a function and attach the function to an ‘onclick’ event then I will have achieved my aim. I was so wrong. Instead of it working I got myself a blank and frozen page each time I clicked the button.
Since this post is to show how to toggle tinyMCE with a click, and not to lament about my travails, I will save you all the unpleasant details of what I went through trying to tweak the initiation and just go straight to the point.
So how do you do it?
After my futile attempts I decided to ask around for a solution. This is when I found out that there is a fourth 'mode option' apart from the three specified in the docs. This is:
tinyMCE.init({
mode : "none"
})
It is my finding of this mode option and two other methods that solved the problem.
This is how to use the two methods in creating a toggle-able editor:
First method adds the editor instance.
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.
Second method removes the editor instance
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>
</body>
