CKEditor

I don't know - if you make it read only it's no longer an editor.

What would a read only instance of CKeditor provide over a regular readonly textarea?

Instead of a textarea I would use an iframe, but I really can't understand why people enjoy so much to download an execute extra code just to disable it.

Wasn't bashing, just try to get what you were trying to achieve.

Is it possible to disable the Save function to prevent content being saved?

I was also trying to find a way to disable the editor... I want to disable it for a brief moment to send the whole form with AJAX... I already disabled other form inputs so the not-disabled editor looks out of place a bit... IMHO there should be an easy way to disable it...

Hi all, I can understand the rational of having this functionality, yet we haven't plain to add it as a core feature, but please feel free to open ticket at our dev site to have it tracked.
Here I hope I could provide a temporary workaround for it:

// Temporary workaround for providing editor 'read-only' toggling functionality.  
( function()
{
   var cancelEvent = function( evt )
      {
         evt.cancel();
      };

   CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
   {
      // Turn off contentEditable.
      this.document.$.body.disabled = isReadOnly;
      CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
      : this.document.$.designMode = isReadOnly ? "off" : "on";

      // Prevent key handling.
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

      // Disable all commands in wysiwyg mode.
      var command,
         commands = this._.commands,
         mode = this.mode;

      for ( var name in commands )
      {
         command = commands[ name ];
         isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
         this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
      }
   }
} )();

// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );

I think there already is one: http://dev.fckeditor.net/ticket/1376

CKEDITOR.instances.editor1.readOnly( true );

I tried the above solution, but received an error of:
"Object doesn't support this property or method".

I had the same problem, bur after some debuggin using VS2008, finally I've made the following changes and it's working:

        this.element.$.disabled = isReadOnly;
        this.element.$.contentEditable = !isReadOnly;
        this.element.$.designMode = isReadOnly ? "off" : "on";

I hope this could help.

David Ayala
Developer @GT

trieps wrote:CKEDITOR.instances.editor1.readOnly( true );

I tried the above solution, but received an error of:
"Object doesn't support this property or method".

Hi, thanks for the bug reporting I've fixed the code in previous post.

Hi Garry,

I just downloaded the last version of CKEditor in order to be able to create a read-only CKEditor but when I tried to call

CKEDITOR.instances.my_editor.readOnly( true );

I get the following message:
"TypeError: CKEDITOR.instances.my_editor.readOnly is not a function".

And when I check at runtime, this function is not defined on the object...

Could you tell me what should I do in order to get the function available?

Thanks in advance

Disabling editing would be useful with collaborative multi user document creation and revision. Some users do not have authority to change the document. We will prevent saving for now, with a reminder alert when text is loaded.

dafooz wrote:Hi Garry,

I just downloaded the last version of CKEditor in order to be able to create a read-only CKEditor but when I tried to call

CKEDITOR.instances.my_editor.readOnly( true );

I get the following message:
"TypeError: CKEDITOR.instances.my_editor.readOnly is not a function".

And when I check at runtime, this function is not defined on the object...

Could you tell me what should I do in order to get the function available?

Thanks in advance

I've added the code given a few post before into the CKEDITOR file and the method is now available BUT it doesn't work... The editor is still modifiable...

Any idea?

I added the above code and it did set the editor to readonly (not able to enter text), however, I can still selecte contents inside the editor and delete them. I'd expect the following code to prevent any key handler, but it doesn't.

// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

any ideas?

adico

I cannot make the 3.0 readonly , any update for this ticket?

Where does this code go?

garry.yao wrote:Hi all, I can understand the rational of having this functionality, yet we haven't plain to add it as a core feature, but please feel free to open ticket at our dev site to have it tracked.
Here I hope I could provide a temporary workaround for it:

// Temporary workaround for providing editor 'read-only' toggling functionality.  
( function()
{
   var cancelEvent = function( evt )
      {
         evt.cancel();
      };

   CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
   {
      // Turn off contentEditable.
      this.document.$.body.disabled = isReadOnly;
      CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
      : this.document.$.designMode = isReadOnly ? "off" : "on";

      // Prevent key handling.
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

      // Disable all commands in wysiwyg mode.
      var command,
         commands = this._.commands,
         mode = this.mode;

      for ( var name in commands )
      {
         command = commands[ name ];
         isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
         this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
      }
   }
} )();

// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );

I got similar problems, where to put the code?
I've tried putting in ckeditor.js, but got the following error from browser
"this.document.$" is null or not an object

And a side question, what the $ represents? I don't quite understand the code

Any updates on this?

the code can go anywhere you want. Open any existing plugin (that you're currently using) and attach the code to the bottom. Then, simply call the method. Post your sample code if you're still having issues, I might be able to help you troubleshoot.

P.S use

  this syntax 

when posting code

add disable Style,Format,Font,Size,Color

////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Temporary workaround for providing editor 'read-only' toggling functionality. 
( function(){
var cancelEvent = function( evt ){
evt.cancel();
};

CKEDITOR.editor.prototype.readOnly = function( isReadOnly ){
// Turn off contentEditable
/*
if ( this.document ){
this.document.$.body.disabled = isReadOnly;
if ( CKEDITOR.env.ie ){ 
this.document.$.body.contentEditable = !isReadOnly;
}else{
this.document.$.designMode = (isReadOnly ? "off" : "on");
}
}
*/

// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;

for ( var name in commands ){
if (name != "ReadonlyCmd"){
command = commands[ name ];
if ( isReadOnly ) {
command.disable();
}else{
command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
}
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}

var i,j,k;
var toolbars = this.toolbox.toolbars;
for ( i = 0; i < toolbars.length; i++ ){
var toolbarItems = toolbars[i].items;
for ( j = 0; j < toolbarItems.length; j++ ){
var combo = toolbarItems[j].combo;
if ( combo ){
combo.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
var button = toolbarItems[j].button;
if ( button && button.createPanel ){
button.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
}
}
}
} )();

Hi,

Can anyone please guide me how/where to implement this code?
I have my ckeditor in my aspx(.net) page

<body>
    <form id="form1" runat="server">
    <div>
        <textarea id="Content" runat="server" />

        <script type="text/javascript" src="UserControls/ckeditor/ckeditor.js"></script>

        <script type="text/javascript">
            CKEDITOR.replace('<%= Content.ClientID %>', { baseHref: '<%= ResolveUrl("~/UserControls/ckeditor/") %>', Toolbar: 'Full', height: 400 });
        </script>

    </div>
    </form>
</body>

dk163 wrote:add disable Style,Format,Font,Size,Color

////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Temporary workaround for providing editor 'read-only' toggling functionality. 
( function(){
var cancelEvent = function( evt ){
evt.cancel();
};

CKEDITOR.editor.prototype.readOnly = function( isReadOnly ){
// Turn off contentEditable
/*
if ( this.document ){
this.document.$.body.disabled = isReadOnly;
if ( CKEDITOR.env.ie ){ 
this.document.$.body.contentEditable = !isReadOnly;
}else{
this.document.$.designMode = (isReadOnly ? "off" : "on");
}
}
*/

// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;

for ( var name in commands ){
if (name != "ReadonlyCmd"){
command = commands[ name ];
if ( isReadOnly ) {
command.disable();
}else{
command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
}
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}

var i,j,k;
var toolbars = this.toolbox.toolbars;
for ( i = 0; i < toolbars.length; i++ ){
var toolbarItems = toolbars[i].items;
for ( j = 0; j < toolbarItems.length; j++ ){
var combo = toolbarItems[j].combo;
if ( combo ){
combo.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
var button = toolbarItems[j].button;
if ( button && button.createPanel ){
button.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
}
}
}
} )();

Related tickets:
http://dev.fckeditor.net/ticket/1376
http://dev.fckeditor.net/ticket/3944

You can also just reference the id of the span created with jquery and hide it from there

<textarea id=editor1 />

$("#cke_editor1").hide();

works like a charm

The above solution posted by Garry Yao doesn't seem to work in firefox. I get an error saying "this.document is undefined"

Hi,

This is nice solution but I get this.toolbox.toolbars is undefined error. Can you help with this?

Perhaps the problem is with the location of this code. Nobody defines the position of this code. Would you clarify this?

Please help

Chris

////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Temporary workaround for providing editor 'read-only' toggling functionality. 
( function(){
var cancelEvent = function( evt ){
evt.cancel();
};

CKEDITOR.editor.prototype.readOnly = function( isReadOnly ){
// Turn off contentEditable
/*
if ( this.document ){
this.document.$.body.disabled = isReadOnly;
if ( CKEDITOR.env.ie ){ 
this.document.$.body.contentEditable = !isReadOnly;
}else{
this.document.$.designMode = (isReadOnly ? "off" : "on");
}
}
*/

// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;

for ( var name in commands ){
if (name != "ReadonlyCmd"){
command = commands[ name ];
if ( isReadOnly ) {
command.disable();
}else{
command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
}
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}

var i,j,k;
var toolbars = this.toolbox.toolbars;
for ( i = 0; i < toolbars.length; i++ ){
var toolbarItems = toolbars[i].items;
for ( j = 0; j < toolbarItems.length; j++ ){
var combo = toolbarItems[j].combo;
if ( combo ){
combo.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
var button = toolbarItems[j].button;
if ( button && button.createPanel ){
button.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
}
}
}
} )();

save below code to myeditor.js

// Temporary workaround for providing editor 'read-only' toggling functionality.  
( function(){
   var cancelEvent = function( evt ){
      evt.cancel();
   };
   
   CKEDITOR.editor.prototype.readOnly = function( isReadOnly ){
      // Turn off contentEditable
      /*
      if ( this.document ){
         this.document.$.body.disabled = isReadOnly;
         if ( CKEDITOR.env.ie ){ 
            this.document.$.body.contentEditable = !isReadOnly;
         }else{
            this.document.$.designMode = (isReadOnly ? "off" : "on");
         }
      }
      */
      
      // Prevent key handling.
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );
   
      // Disable all commands in wysiwyg mode.
      var command,
      commands = this._.commands,
      mode = this.mode;
   
      for ( var name in commands ){
         if (name != "ReadonlyCmd"){
            command = commands[ name ];
            if ( isReadOnly ) {
               command.disable();
            }else{
               command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
            }
            this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
         }
      }
      
      var i,j,k;
      var toolbars = this.toolbox.toolbars;
      for ( i = 0; i < toolbars.length; i++ ){
         var toolbarItems = toolbars[i].items;
         for ( j = 0; j < toolbarItems.length; j++ ){
            var combo = toolbarItems[j].combo;
            if ( combo ){
               combo.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
            }
            var button = toolbarItems[j].button;
            if ( button && button.createPanel ){
               button.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
            }
         }
      }
   }
} )();
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function addUploadButton(editor){
   CKEDITOR.on('dialogDefinition', function( ev ){
      var dialogName = ev.data.name;
      var dialogDefinition = ev.data.definition;
      if ( dialogName == 'image' ){
         var infoTab = dialogDefinition.getContents( 'info' );
         infoTab.add({
            type : 'button',
            id : 'upload_image',
            align : 'center',
            label : 'Upload',
            style : 'display:inline-block;margin-top:12px;',
            onClick : function( evt ){
               var thisDialog = this.getDialog();
               var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
               var txtUrlId = txtUrlObj.getInputElement().$.id;
               addNestedImage(txtUrlId);
            }
         }, 'browse'); //place front of the browser button
      }
   });
}
function addReadonlyButton(editor, theMode){
   editor.on('pluginsLoaded', function( ev ){
      var savedState = CKEDITOR.TRISTATE_OFF;
      var i,j,k;
      editor.addCommand( 'ReadonlyCmd', {
         exec : function (e){
            switch (this.state){
               case CKEDITOR.TRISTATE_OFF :
                  editor.readOnly(true);
                     break;
               case CKEDITOR.TRISTATE_ON :
                  editor.readOnly(false);
                  break;
            }
            this.toggleState();
            savedState = this.state;
         },
         canUndo : false
      });
      
      editor.ui.addButton( 'Readonly', {
         label : 'Readonly',
         command : 'ReadonlyCmd',
         icon : '/images/edit/view.gif'
         //style on below
      });
      
      editor.on( 'mode', function() {
         editor.getCommand( 'ReadonlyCmd' ).setState( savedState );
      }, null, null, 100 );
   });
   setReadonlyButtonStyle();
}

function setReadonlyButtonStyle(){
   var cssText = ''
   + '.cke_button_ReadonlyCmd .cke_icon{'
   + ' width:32px;'
   + ' height:32px;'
   + '   display: inline-table !important;'
   + '}'
   + '.cke_button_ReadonlyCmd .cke_label{'
   + '   display: inline-table !important;'
   + '   margin-top: 0px !important;'
   + '}';
   importStyle(cssText);
}

function initEditor(theName, theMode, theWidth, theHeight){
   var editor = CKEDITOR.replace(theName, {
      language : 'en',
      skin : 'office2003',
      startupFocus : true,
      resize_minWidth : 700,
      image_previewText : ' ', //can not empty, when empty will show default content
      toolbar : [ //remove Save, NewPage, Form and input elements, add Readonly
            ['Source','-','Readonly','-','Templates'],
            ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
            ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
            '/',
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
            ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['Link','Unlink','Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
            '/',
            ['Styles','Format','Font','FontSize'],
            ['TextColor','BGColor'],
            ['Maximize', 'ShowBlocks','-','About']
      ],
      width : theWidth,
      height : theHeight
   });
   addUploadButton(editor);
   addReadonlyButton(editor);
   if (theMode == "VIEW"){
      setTimeout(function(){
         editor.execCommand('ReadonlyCmd'); //click readonly
      }, 500);
   }
   setTimeout(function(){
      var tmpObj = document.getElementById("cke_" + theName);
      var tmpInputs = tmpObj.getElementsByTagName("input");
      if (tmpInputs.length > 0){
         tmpInputs[0].style.display = "none";
      }
   }, 500);
}

and on the html head import
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="myeditor.js"></script>
<script type="text/javascript">
document.onload = function(){
initEditor("<%=[Content]%>", "<%=[Mode]%>", "<%=[Width]%>", "<%=[Height]%>");
}
</script>

chrisiek wrote:Hi,

This is nice solution but I get this.toolbox.toolbars is undefined error. Can you help with this?

Perhaps the problem is with the location of this code. Nobody defines the position of this code. Would you clarify this?

Please help

Chris

////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Temporary workaround for providing editor 'read-only' toggling functionality. 
( function(){
var cancelEvent = function( evt ){
evt.cancel();
};

CKEDITOR.editor.prototype.readOnly = function( isReadOnly ){
// Turn off contentEditable
/*
if ( this.document ){
this.document.$.body.disabled = isReadOnly;
if ( CKEDITOR.env.ie ){ 
this.document.$.body.contentEditable = !isReadOnly;
}else{
this.document.$.designMode = (isReadOnly ? "off" : "on");
}
}
*/

// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;

for ( var name in commands ){
if (name != "ReadonlyCmd"){
command = commands[ name ];
if ( isReadOnly ) {
command.disable();
}else{
command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
}
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}

var i,j,k;
var toolbars = this.toolbox.toolbars;
for ( i = 0; i < toolbars.length; i++ ){
var toolbarItems = toolbars[i].items;
for ( j = 0; j < toolbarItems.length; j++ ){
var combo = toolbarItems[j].combo;
if ( combo ){
combo.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
var button = toolbarItems[j].button;
if ( button && button.createPanel ){
button.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
}
}
}
} )();

Hi
i have user your code in my application for readOnly. Everything goes fine but only if i have once instancs of CKeditor. If I have two or more instance in the same page, the toolbars change state correctly but is impossible to write in the editors.

The problem seems to be here:

this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

Some idea?

Thank you

<script type="text/javascript">
window.onload = function () {

CKEDITOR.on("instanceReady", function (ev) {
var bodyelement = ev.editor.document.$.body;
bodyelement.setAttribute("contenteditable", false);


});
CKEDITOR.replace('editor1');
};

</script>

alfonsoml wrote:Instead of a textarea I would use an iframe, but I really can't understand why people enjoy so much to download an execute extra code just to disable it.

Sometimes, for functionality, I agree that the editor is not active until either a case ... because a checkbox is not activated, because a user does not have permission, etc..
Make a read-only editor is not so farfetched. It is an interesting case, but whoever does not happen to you is no reason for rejecting a proposal.
-----------------
Me acabo de dar cuenta que eres español, Alfonso Lo que te quiero decir, es que muchas veces, por funcionalidad, el cliente te impone unas pautas o directrices que casi que son de diseño, en el que te piden que no dejes activos ciertos campos de un formulario para evitar que se meta más basura de la cuenta, y el desactivar el editor es tan válido como desactivar una caja de texto por la razón X, bien sea porque se debería activar al activarse un checkbox, porque el usuario no tenga permisos de escritura, o por motivos más complejos como el que sucede en mi caso. Aun así es una propuesta interesante y no estaría demás que estuviera en una futura versión mejora del ckeditor. Mientras sean mejoras...

garry.yao wrote:Hi all, I can understand the rational of having this functionality, yet we haven't plain to add it as a core feature, but please feel free to open ticket at our dev site to have it tracked.
Here I hope I could provide a temporary workaround for it:

// Temporary workaround for providing editor 'read-only' toggling functionality.  
( function()
{
   var cancelEvent = function( evt )
      {
         evt.cancel();
      };

   CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
   {
      // Turn off contentEditable.
      this.document.$.body.disabled = isReadOnly;
      CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
      : this.document.$.designMode = isReadOnly ? "off" : "on";

      // Prevent key handling.
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
      this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

      // Disable all commands in wysiwyg mode.
      var command,
         commands = this._.commands,
         mode = this.mode;

      for ( var name in commands )
      {
         command = commands[ name ];
         isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
         this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
      }
   }
} )();

// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );

Where should I put that code exactly? I guess the first code in the file ckeditor.js, but the second code?