How do you make a ckeditorClassic (textarea field) read only.

rmeetin

I have an administration form for managing comments. To act on a comment the admin should first read the comment. In order to properly read it I have ckeditorClassic type enabled, otherwise it will be a challenge because of all the html markup.

The administrator should not be able to edit the comment, only approve/disapprove. Both 'readonly' and 'ckeditorClassic' share text type thus they are mutually incompatible.

In another thread I found attr and tried it:

    {
      label: 'Comment',
      name: 'blog_comments.comment',
      type: 'textarea',
      type: 'ckeditorClassic',
      attr:{ disabled:true },
    },

Does attr not work in this instance or do I have the formatting wrong?

kthorngren

I think you can use the initEdit event and use disable() in the event to disable the field. Maybe something like this:

editor.on('initEdit', function() {
    editor.disable('blog_comments.comment');
});

Kevin

rmeetin

To the html file I added it as:

editor
.on( 'postCreate postRemove', function () {
table.ajax.reload( null, false );
} )
.on( 'initCreate', function () {
editor.field( 'blog_comments.rowOrder' ).enable();
} )
.on( 'initEdit', function () {
editor.field( 'blog_comments.rowOrder' ).disable();
editor.disable('blog_comments.comment');
} );
} );

Other than graying out the text it is still editable - and the edits save.

colin

This example from this thread should help - it's disabling the Age field on edit, but it's writable on creation.

The key code is:

  editor.on('preOpen', function(e, mode, action) {
    if (action === 'create') {
      editor.field('age').enable();      
    }
    else {
      editor.field('age').disable();
    }
  });

Colin

rmeetin

I do appreciate the pointers however it still isn't working. Here is the code with the previous attempt commented out:

  editor

    .on('preOpen', function(e, mode, action) {
      if (action === 'create') {
        editor.field('blog_comments.comment').enable();
      }
      else {
        editor.field('blog_comments.comment').disable();
      }
    } )

    .on( 'postCreate postRemove', function () {
      table.ajax.reload( null, false );
    } )

    .on( 'initCreate', function () {
      editor.field( 'blog_comments.rowOrder' ).enable();
    } )

    /*
    .on( 'initEdit', function () {
      editor.field( 'blog_comments.rowOrder' ).disable();
      editor.disable('blog_comments.comment');
    } )
    */
    ;

  } );

Just to see, I switched enable to disable in the create action if; didn't expect any impact and wasn't disappointed.

rmeetin

Are there any corresponding changes I might make in the controller file?

kthorngren

I don't use CKEditor but it looks like this might be the way to make it read only:
https://ckeditor.com/docs/ckeditor4/latest/features/readonly.html

Maybe something like this will work::

{
  label: 'Comment',
  name: 'blog_comments.comment',
  type: 'textarea',
  type: 'ckeditorClassic',
  opts: {readOnly: true}
},

The plugin uses this conf._editor = CKEDITOR.replace( id, conf.opts ); when opened so I'm guessing you can use opts to pass the readOnly option.

Kevin

rmeetin

    {
      label: 'Comment',
      name: 'blog_comments.comment',
      type: 'ckeditorClassic',
      opts: {readOnly: true}
    },

I appreciate the assistance yet it remains editable. I'm fairly certain that I can do some jerry-rigging in the php controller file to, essentially, restore a comment to previous saved text, however those hacks can be ugly. Any other ideas?

vincmeister

Hello,
any solution of this case?

Danny

colin

This here worked for me : https://github.com/ckeditor/ckeditor5/issues/1886 - it needs

            editor.isReadOnly = true;

set,

Colin

vincmeister

Hi @colin
Sorry for my very late reply
where to put that code? Need advise, thank you

Danny

colin

I forgot myself and had to go back over it! It's in the ckEditor plugin code, something like this:

    enable: function ( conf ) {
        conf._editor.isReadOnly = true;
    },

Colin