TinyMCE - Toggle controls for different textareas

Hi folks,

The code below initialises TinyMCE and doesnt load it into any text area which is exactly what I want - When I click on the toggle button for a particular control it loads in the TinyMCE editor fine (only since i added the id=document.getElementById(id) part) but when I click the toggle button on another textarea it unloads the control from the previous textarea, and when i click the this button again it then loads into this new <textarea>

I have about 10 <textarea> on my form, and i basically want to load controls in and out of these when the user requires. Can anyone point me in the right direction?

Browser: IE 7


tinyMCE.init({
 
        mode : "none", 
 
        theme : "advanced"
 
    });
 
function toggleEditor(id) 
{
 
    id = document.getElementById(id);
 
    if (!tinyMCE.get(id))
        tinyMCE.execCommand('mceAddControl', true, id);
    else
        tinyMCE.execCommand('mceRemoveControl', true, id);
}
 
<textarea name="MyTextArea" style="width:100%">
      </textarea>
<a href="javascript:toggleEditor('MyTextArea');">Enter text</a>

Open in new window

DevSureAsked:
Who is Participating?
 
OMC2000Connect With a Mentor Commented:
You don't need getElementById, I guess the problem was in undefined ID attribute for your textarea. Check the following:

function toggleEditor(id)
{
    if (!tinyMCE.get(id))
        tinyMCE.execCommand('mceAddControl', true, id);
    else
        tinyMCE.execCommand('mceRemoveControl', true, id);
}

<textarea name="MyTextArea" id="MyTextArea"  style="width:100%">
      </textarea>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.