How to disable CKeditor with jQuery

Question

I am using CKEditor in my web application and need to disable/enable the editor from javascript. I know that there is an option called readOnly but I don't know how to set it from jQuery.

Does anybody know how to disable and enable back the CKEditor using jQuery please?

Answer 1

The easiest way:

To disable CKEditor:

CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(true);

To enable CKEditor:

CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(false);

Answer 2

Assuming you have included jQuery adapter following code should make it readonly. You can take the jQuery adapter from the example if not yet included.

<div class="wrapper">
    <form id="myfrm" name="myfrm" class="myfrm" action="" method="post">
        <textarea id="myeditor" name="myeditor"></textarea>
        <input type="submit" id="submit" name="submit" value="Submit" />
    </form>
</div>​

and the js

$(document).ready(function(e) {
    var myeditor = $('#myeditor');
    myeditor.ckeditor();
    myeditor.ckeditorGet().config.resize_enabled = false;
    myeditor.ckeditorGet().config.height = 200;
    myeditor.ckeditorGet().config.readOnly = true;
});

To enable or disable a ckeditor based on your selection of a select box you'd have to make a change event like this

$(document).ready(function(){
    //put ckeditor initialization (the above) here.
    $('#myselect').change(function(){
         var x = $(this);
         if(x.val()=='enable'){
             myeditor.removeAttr('disabled');           
         }else if(x.val()=='disable'){
             myeditor.attr('disabled','disabled');            
         }
         myeditor.ckeditorGet().destroy();
         myeditor.ckeditor();
    });
});

What we are doing above is setting the original element to have attribute disabled="disabled" and reloading ckeditor after destroying the current instance. Check the JSFiddle Example 2.

JSFiddle Example to reflect OP's query