I'm struggling with building a TinyMCE textarea input field which should be toggled from enabled/disabled depending on the state of other input fields. So far I've got the following working to toggle it:

var mceInstance = tinymce.get(TargetElementId);
mceInstance.getBody().setAttribute('contenteditable',false);

By toggling the 'contenteditable' parameter like this I can easily make the textarea disabled or not, so far so good.

The last problem I have to tackle, is that the textarea should be disabled upon initial loading, and it seems the 'contenteditable' parameter can't be passed as an tinyMCE.init() parameter... There is a 'readonly' paremeter which can be passed with tinyMCE.init(), but that one can't be toggled at a later time...

Any ideas on how to acplish this?

I'm struggling with building a TinyMCE textarea input field which should be toggled from enabled/disabled depending on the state of other input fields. So far I've got the following working to toggle it:

var mceInstance = tinymce.get(TargetElementId);
mceInstance.getBody().setAttribute('contenteditable',false);

By toggling the 'contenteditable' parameter like this I can easily make the textarea disabled or not, so far so good.

The last problem I have to tackle, is that the textarea should be disabled upon initial loading, and it seems the 'contenteditable' parameter can't be passed as an tinyMCE.init() parameter... There is a 'readonly' paremeter which can be passed with tinyMCE.init(), but that one can't be toggled at a later time...

Any ideas on how to acplish this?

• javascript

Share Improve this question Follow asked Dec 24, 2013 at 15:32 AlexAlex 1,05022 gold badges1818 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Solved it!

I found that by passing init_instance_callback with the TinyMCE init code, I could run the same code as used in my 'toggle' function. So you can pass this in the TinyMCE init part if you want this:

init_instance_callback : function(editor)
{
    if(document.getElementById(editor.id).hasAttribute('disabled'))
    {
        editor.getBody().setAttribute('contenteditable',false);
        editor.getBody().style.backgroundColor = "grey";
    }
}

The above code will look at the specified instance, if the originating HTML element (textarea in my case) has the 'disabled' attribute, it will set the 'contenteditable' parameters to false.

I hope this is useful to someone else, I know I was happy when I cracked it :-)