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

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

rmeetinrmeetin Posts: 97Questions: 23Answers: 1

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?

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited October 2020

    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

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1

    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.

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited October 2020

    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

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1
        {
          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?

  • vincmeistervincmeister Posts: 136Questions: 36Answers: 4

    Hello,
    any solution of this case?

    Danny

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

                editor.isReadOnly = true;
    

    set,

    Colin

  • vincmeistervincmeister Posts: 136Questions: 36Answers: 4

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

    Danny

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

Sign In or Register to comment.