How to make CKEditor readonly ?

Wed, 09/09/2009 - 18:42

#2

eggbert

Joined: 09/09/2009

Posts: 16

Re: How to make CKEditor readonly ?

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?

Wed, 09/09/2009 - 22:33

#3

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: How to make CKEditor readonly ?

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.

Fri, 09/11/2009 - 17:11

#4

xandros

Joined: 06/09/2009

Posts: 6

Re: How to make CKEditor readonly ?

Hey, why bashing if you don't know the answer to my inquiry anyway ?

The reason is to have the same code on the page, and being able to put the editor in readonly mode in runtime (maybe in load time) depending on specific external events in order to prevent concurrent modification of the same rich text content by different users, for example.

And btw Eggbert, the editor already uses an iframe. Removing the iframe's design mode works ok, but there appears to be other CKEditor specific stuff that still keeps modifying the iframe contents and sometimes throw errors in IE ...

Sat, 09/12/2009 - 00:30

#5

eggbert

Joined: 09/09/2009

Posts: 16

Re: How to make CKEditor readonly ?

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?

Sat, 09/12/2009 - 16:04

#6

nowotny

Joined: 12/09/2009

Posts: 4

Re: How to make CKEditor readonly ?

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...

Mon, 09/14/2009 - 08:14

#7

garry.yao

Joined: 03/01/2009

Posts: 170

Re: How to make CKEditor readonly ?

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 );

Mon, 09/14/2009 - 15:57

#8

nowotny

Joined: 12/09/2009

Posts: 4

Re: How to make CKEditor readonly ?

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

Mon, 09/21/2009 - 11:40

#9

xandros

Joined: 06/09/2009

Posts: 6

Re: How to make CKEditor readonly ?

Thanks Garry ! Is there a way to cleanly integrate this piece of code into ckeditor.js file directly ?

Thanks !

Wed, 09/23/2009 - 23:58

#10

trieps

Joined: 23/09/2009

Posts: 1

Re: How to make CKEditor readonly ?

CKEDITOR.instances.editor1.readOnly( true );

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

Sun, 09/27/2009 - 03:35

#11

dresdda

Joined: 27/09/2009

Posts: 1

Re: How to make CKEditor readonly ?

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

Fri, 10/16/2009 - 21:11

#12

garry.yao

Joined: 03/01/2009

Posts: 170

Re: How to make CKEditor readonly ?

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".

Thu, 10/22/2009 - 09:48

#13

dafooz

Joined: 22/10/2009

Posts: 4

Re: How to make CKEditor readonly ?

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

Tue, 11/03/2009 - 17:37

#14

javapapa

Joined: 24/06/2009

Posts: 1

Re: How to make CKEditor readonly ?

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.

Mon, 11/09/2009 - 07:50

#15

dafooz

Joined: 22/10/2009

Posts: 4

Re: How to make CKEditor readonly ?

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?

Mon, 11/23/2009 - 22:26

#16

adico

Joined: 02/11/2009

Posts: 100

Re: How to make CKEditor readonly ?

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

Thu, 12/03/2009 - 21:04

#17

coocieca

Joined: 26/11/2009

Posts: 2

Re: How to make CKEditor readonly ?

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

Tue, 12/22/2009 - 02:13

#18

bhellman1

Joined: 21/12/2009

Posts: 23

Re: How to make CKEditor readonly ?

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 );

Tue, 12/22/2009 - 10:33

#19

arthastsang

Joined: 22/12/2009

Posts: 1

Re: How to make CKEditor readonly ?

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

Fri, 01/15/2010 - 14:29

#20

george.papageorgiou

Joined: 15/01/2010

Posts: 1

Re: How to make CKEditor readonly ?

Any updates on this?

Fri, 01/15/2010 - 16:30

#21

adico

Joined: 02/11/2009

Posts: 100

Re: How to make CKEditor readonly ?

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

Tue, 01/26/2010 - 11:07

#22

dk163

Joined: 26/01/2010

Posts: 5

Re: How to make CKEditor readonly ?

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 );
}
}
}
}
} )();

Thu, 06/17/2010 - 23:25

#23

abhinay86

Joined: 17/06/2010

Posts: 2

Re: How to make CKEditor readonly ?

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 );
}
}
}
}
} )();

Thu, 06/24/2010 - 00:51

#24

fredrik_wendt

Joined: 10/04/2010

Posts: 8

Re: How to make CKEditor readonly ?

Tue, 08/17/2010 - 10:00

#25

d1820

Joined: 17/08/2010

Posts: 1

Re: How to make CKEditor readonly ?

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

Thu, 09/23/2010 - 17:29

#26

dydyredt

Joined: 30/08/2010

Posts: 2

Re: How to make CKEditor readonly ?

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

Sun, 12/05/2010 - 01:52

#27

chrisiek

Joined: 27/11/2010

Posts: 3

Re: How to make CKEditor readonly ?

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 );
}
}
}
}
} )();

Thu, 12/09/2010 - 05:46

#28

dk163

Joined: 26/01/2010

Posts: 5

Re: How to make CKEditor readonly ?

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 );
}
}
}
}
} )();

Thu, 12/16/2010 - 16:33

#29

marciuz

Joined: 16/12/2010

Posts: 1

Re: How to make CKEditor readonly ?

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

Mon, 02/28/2011 - 21:34

#30

decherneyge

Joined: 28/02/2011

Posts: 1

Re: How to make CKEditor readonly ?

Mon, 03/21/2011 - 12:07

#31

andynedine

Joined: 17/03/2011

Posts: 21

Re: How to make CKEditor readonly ?

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.