CKEditor 4
Mon, 09/07/2009 - 13:26
#1
xandros
xandros's picture
Joined: 06/09/2009
Posts: 6

How to make CKEditor readonly ?

hello !

I searched in the documentation and didnt find anything related to this question. How to make CKEditor readonly at runtime (or even better, right when calling 'replace') ?

The following works for one part :
   editorInstance.document.$.body.disabled = true;
   editorInstance.document.$.body.contentEditable = false;
   editorInstance.document.$.designMode="off"


but the problem is that even though I can't type to the editor any more, some keystrokes like TAB or simple mouse clicks generate newlines and sometimes JS errors.

Is there a command or a call to put the editor in complete readonly mode ?

Thanks
Top
Wed, 09/09/2009 - 18:42
eggbert
eggbert's picture
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?
Top
Wed, 09/09/2009 - 22:33
alfonsoml
alfonsoml's picture
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.
Top
Fri, 09/11/2009 - 17:11
xandros
xandros's picture
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 ...
Top
Sat, 09/12/2009 - 00:30
eggbert
eggbert's picture
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?
Top
Sat, 09/12/2009 - 16:04
nowotny
nowotny's picture
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...
Top
Mon, 09/14/2009 - 08:14
garry.yao
garry.yao's picture
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 );
Top
Mon, 09/14/2009 - 15:57
nowotny
nowotny's picture
Joined: 12/09/2009
Posts: 4

Re: How to make CKEditor readonly ?

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

Top
Mon, 09/21/2009 - 11:40
xandros
xandros's picture
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 !
Top
Wed, 09/23/2009 - 23:58
trieps
trieps's picture
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".
Top
Sun, 09/27/2009 - 03:35
dresdda
dresdda's picture
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
Top
Fri, 10/16/2009 - 21:11
garry.yao
garry.yao's picture
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".

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

Top
Thu, 10/22/2009 - 09:48
dafooz
dafooz's picture
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
Top
Tue, 11/03/2009 - 17:37
javapapa
javapapa's picture
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.
Top
Mon, 11/09/2009 - 07:50
dafooz
dafooz's picture
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?
Top
Mon, 11/23/2009 - 22:26
adico
adico's picture
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
Top
Thu, 12/03/2009 - 21:04
coocieca
coocieca's picture
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?

Top
Tue, 12/22/2009 - 02:13
bhellman1
bhellman1's picture
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 );
Top
Tue, 12/22/2009 - 10:33
arthastsang
arthastsang's picture
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
Top
Fri, 01/15/2010 - 14:29
george.papageorgiou
george.papageorgiou's picture
Joined: 15/01/2010
Posts: 1

Re: How to make CKEditor readonly ?

Any updates on this?
Top
Fri, 01/15/2010 - 16:30
adico
adico's picture
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
Top
Tue, 01/26/2010 - 11:07
dk163
dk163's picture
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 );
}
}
}
}
} )();
Top
Thu, 06/17/2010 - 23:25
abhinay86
abhinay86's picture
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 );
}
}
}
}
} )();
Top
Thu, 06/24/2010 - 00:51
fredrik_wendt
fredrik_wendt's picture
Joined: 10/04/2010
Posts: 8

Re: How to make CKEditor readonly ?

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

Top
Tue, 08/17/2010 - 10:00
d1820
d1820's picture
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
Top
Thu, 09/23/2010 - 17:29
dydyredt
dydyredt's picture
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"
Top
Sun, 12/05/2010 - 01:52
chrisiek
chrisiek's picture
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 );
}
}
}
}
} )();
Top
Thu, 12/09/2010 - 05:46
dk163
dk163's picture
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 );
}
}
}
}
} )();
Top
Thu, 12/16/2010 - 16:33
marciuz
marciuz's picture
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
Top
Mon, 02/28/2011 - 21:34
decherneyge
decherneyge's picture
Joined: 28/02/2011
Posts: 1

Re: How to make CKEditor readonly ?

<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>
Top
Mon, 03/21/2011 - 12:07
andynedine
andynedine's picture
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.

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

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?

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check