Topic: Can I dynamically enable/disable TinyMCE?

Hi all,

how can I dynamically enable/disable a TinyMCE instance? I've spent the whole
day on that, but cannot find a real solution.

'disabled = true' or 'readonly = true' don't seem to work. I can enable/disable
the text area with

   ed.execCommand("contentReadOnly", false, flg);

but then still the Toolbar buttons can be operated. I can handle the individual
buttons with

   ed.controlManager.setDisabled("bold", flg);

but this is not a good way if there are 40 buttons, right? Isn't there a way to
directly disable the whole Toolbar or, even better, the whole TinyMCE instance?

If so, what is the right way to give a visual feedback? Can it be dimmed or
grayed, like other components, e.g. by using some style?


Re: Can I dynamically enable/disable TinyMCE?

OK, meanwhile I found out how to access the toolbar(s):


However, enabling or disabling it seems to have no effect:


I still didn't manage to find all controls in the toolbar, for example by
accessing 'ed.controlManager.controls'. If so, I would write a loop calling
setDisabled() on them. Any ideas?


Re: Can I dynamically enable/disable TinyMCE?

abu wrote:

Hi all,
how can I dynamically enable/disable a TinyMCE instance? I've spent the whole
day on that, but cannot find a real solution.

I use this as a test and debug tool:


    <input type="button" value="Textarea" onclick="toggle(this);" />


* Toggle WYSIWYG / textarea (for debug - not normally used)
function toggle(a)
    var ed = tinyMCE.activeEditor;


        a.value = 'Textarea';
        a.value = 'WYSIWYG';

The resulting button toggles between the textarea and the TinyMCE editor. Hope this helps.

-- Roger

"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


Re: Can I dynamically enable/disable TinyMCE?

Hi Roger,

thanks for your input!

This is not exactly what I need. Hiding and showing is a bit too heavy, I just
want to disable/enable it.

However, meanwhile I found a workable solution:

   var Tools = ["toolbar1", "toolbar2", "toolbar3"];
   var flg = ed.getElement().disabled;
   ed.execCommand("contentReadOnly", false, flg);
   for (var i in Tools) {
      var ct = ed.controlManager.get(Tools[i]).controls;
      for (var j in ct)

Depending on the underlying original component (a textarea enabled and disabled
according to various conditions), which is accessed with ed.getElement(), first
the editor's text area is enable/disabled with ed.execCommand("contentReadOnly",
false, flg), and then all controls in the three toolbars are processed.

This solution also has a pleasing visual effect, as the disabled controls are
dimmed by setDisabled().


Re: Can I dynamically enable/disable TinyMCE?

Excellent research @Abu, it has helped me a lot. I wonder, I'm still able to place the cursor inside my instance of TinyMCE; which activates the paragraph alignment tool items o_O. All other items are disabled, as are the paragraph tools *before* I place the cursor.

When I then access the paragraph tools, redo/undo then become activate too. And then also the link and subsequent unlink tools. There may be more tools which then become active; I haven't tried altering my toolbar plugin sets yet.

Can you think of a way to squash any cursor placement in the instance also? I'm thinking a focus listener which squashes the focus event might do, but haven't had much luck so far.

Also, we use the "Path: " and resize toolbar sitting at the bottom of the instance; do these have equivalent disablers? I tried passing in their id's to the Tools array in your example but generated errors.

Last edited by danjah (2012-04-05 05:49:52)


Re: Can I dynamically enable/disable TinyMCE?

Great thanks Abu. Your code helped me getting the toolbar disabled.

Anyone knows why toolbar.setDisabled(true) simply does not work?


Re: Can I dynamically enable/disable TinyMCE?

Abu, thanks very much, your code got me pointed in the right direction.  Here is what I ended up writing.  It is a sleight modification of your code..... perhaps the TinyMCE API has changed since you originally posted it.  This is what I had to do to get it working....

var ct = ed.controlManager.controls;
for (var j in ct)

That block of code above disables all the controls for me.  (It works for me using the 'simple' theme.... haven't tried with anything else.)  I execute this code inside of an event handler that I attach to the event:  ed.onInit().  (See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit for details on attaching to this event.)

What is different about my code is that I am accessing the controls list directly off of the controlManager object, instead of trying to iterate through a list of toolbars.