disabiling Ckeditor with javascript

Question

I have a ckeditor in my page which is created by the code below:

$ckeditor = new CKEditor();
$ckeditor->basePath  = 'ckeditor/' ;
CKFinder::SetupCKEditor( $ckeditor, 'ckfinder/' ) ;
$config['height'] = '300';
$config['width'] = '700';
$initialValue = $initial['content'];
$ckeditor->editor('content', $initialValue, $config);

I want to disable this ckeditor based on the selection of a selectbox in the same page.

do you guys have any clue on this.

Thanks in advance.

Have you tried http://stackoverflow.com/questions/1794219/ckeditor-instance-already-exists ? — Amit Garg, Dec 12 '12 at 12:13
try `CKEDITOR.instances.content.updateElement();` onChange event of you selection box. — Pankit Kapadia, Dec 12 '12 at 12:21
@complex05 - what exactly you want to do?? You want to disable the ckeditor or you want to replace the ckeditor with normal textarea?? — Pankit Kapadia, Dec 12 '12 at 12:22
I want to disable the editor based on the selection of a select box in the same page. — ilhank, Dec 12 '12 at 12:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21005/discussion-between-pankit-kapadia-and-complex05) — Pankit Kapadia, Dec 12 '12 at 12:33
@complex05 - and here i got the solution. Check my answer.. !! :) Hope it will help you. — Pankit Kapadia, Dec 12 '12 at 18:25

Pankit Kapadia · Answer 1 · 2012-12-12T18:34:15.410

Here it is, Just Copy & Paste: Version 3.6 or Newer

<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
    editor = ev.editor;

    // Show this "on" button.
    document.getElementById( 'readOnlyOn' ).style.display = '';

    // Event fired when the readOnly property changes.
    editor.on( 'readOnly', function() {
        document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
        document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
    });
});

function toggleReadOnly( isReadOnly ) {
    // Change the read-only state of the editor.
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setReadOnly
    editor.setReadOnly( isReadOnly );
}
</script>
</head>
<body>
<p>
    <textarea class="ckeditor" id="editor1" name="editor1"></textarea>
</p>
<p>
    <input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none">
    <input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none">
</p>
</body>
</html>

LoneWOLFs · Answer 2 · 2012-12-14T07:35:04.143

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

JSFiddle Example 2 to reflect OP's query

score 0 · Answer 3 · answered Dec 12 '12 at 12:12

0

I did this the other day you want to use .setReadOnly (true) on the CKEDITOR instance and then use .setReadOnly (false) to re-enable it.

answered Dec 12 '12 at 12:12

Mark Davidson

5,503
5
35
54

1

I tried $("content").ckeditorGet().setReadOnly(true); and this did not work – ilhank Dec 12 '12 at 12:17

disabiling Ckeditor with javascript

3 Answers3