Ckeditor5: How to disable and enable CKEditor 5

[conangithub]

I am using CKEditor 5 version 12.2.0 which is installed using CDN.

I cannot disable or make my CKEditor read-only. I've read these documentation but still don't work.

https://ckeditor.com/docs/ckeditor5/latest/features/read-only.html
https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#member-isReadOnly

This is my code

ClassicEditor.create(document.querySelector('#description')) .then(editor => { console.log(editor); }) .catch(error => { console.error(error); });

To disable it, my code like this

$('#description').isReadOnly = true;

Please help me. @Reinmar @mlewand

[Mgsy]

Your code doesn't work, because you try to set isReadOnly property on a source element. This API is available via the editor instance, so you should use editor.isReadOnly = true; instead.

[conangithub]

How to apply editor instance to my code? I don't really understand when read that page you give to me. Any example? @Mgsy

[Mgsy]

How to apply editor instance to my code? I don't really understand when read that page you give to me. Any example? @Mgsy

You can access the editor instance i.e. after creating the editor. Please, see the code below:

ClassicEditor.create( document.querySelector('#description' ) )
     .then(editor => { 
          console.log( editor ); 
          editor.isReadOnly = true; // make the editor read-only right after initialization
     } ) .catch( error => { 
          console.error( error ); 
     } );

[conangithub]

Ok. I applied to my code and it works. Thank you for helping me.

[conangithub]

Sorry, one more problem. I use editor as global variable so it can be accessed by other function.

var descriptionEditor;

ClassicEditor
        .create(document.querySelector('#description'))
        .then(editor => {
          console.log(editor);
          descriptionEditor = editor;
        })
        .catch(error => {
          console.error(error);
        });

descriptionEditor.isReadOnly = true;

I got this error.

TypeError: undefined is not an object (evaluating 'descriptionEditor.isReadOnly = true')

@Mgsy

[pomek]

When JS engine is executing descriptionEditor.isReadOnly = true;, the variable is equal to undefined. It will change its value when ClassicEditor.create() promise is being resolved.

[conangithub]

Ok. I got it. Better I put isReadOnly inside ClassicEditor.create() function as be told above.
The global variable works if we put inside any event.

Thank you. My problem is solved.

[Sumit-Shahu]

Your code doesn't work, because you try to set isReadOnly property on a source element. This API is available via the editor instance, so you should use editor.isReadOnly = true; instead.

I need to know how to make isReadONly = true for particular element/ tag but not entire document

[anobjectn]

In my current project, I was looking for this ability - to disable programmatically but only after page has loaded based on the user via JS. For me, simply disabling the textarea "_behind_" ckeditor did the trick as thos fields will not post. This was the behavior I wanted and its a common method across regular inputs, selects, textareas, and of course ckeditor enhanced textareas.

with jQuery, that could be something like
$myFieldsDefinedElsewhere.attr('disabled', true);
$myFieldsDefinedElsewhere.attr('disabled', false);
or vanilla
document.getElementById("myTextarea").disabled = true;
document.getElementById("myTextarea").disabled = false;

[Chandrashreej]

Your code doesn't work, because you try to set isReadOnly property on a source element. This API is available via the editor instance, so you should use editor.isReadOnly = true; instead.

I need to know how to make isReadONly = true for particular element/ tag but not entire document

Did you get any solution for this?

[caamaann]

How to disable CKEditor 5 in react app?
export function CKRTE(field) { const { input: { onChange, value }, } = field; return ( <div className={css(styles.formContainer)}> <CKEditor {...field.input} editor={ClassicEditor} isReadOnly={field.isReadOnly} data={value} onChange={(event, editor) => onChange(editor.getData())} onBlur={(event, editor) => {}} config={{ extraPlugins: [MyCustomUploadAdapterPlugin] }} /> <div className={css(styles.errorContainer)}> {field.meta.touched ? field.meta.error : ""} </div> </div> ); }
my code is like this