javascriptreactjsckeditor5

How to make "Ckeditor-5 document editor" disabled or readOnly


I'm using CKeditor5 document editor in reactjs. And i want to make it disabled or readonly. I'm sending parameter in config but not working.

<CKEditor2
                      editor={DecoupledEditor}
                      data="<p>Hello from CKEditor 5!</p>"
                      onInit={editor => {
                        editor.ui.view.editable.element.parentElement.insertBefore(
                          editor.ui.view.toolbar.element,
                          editor.ui.view.editable.element
                        );
                      }}
                      config={
                        {
                          toolbar: ['bold', 'italic', 'bulletedList', '|', 'numberedList', 'alignment'],
                          removePlugins: ['Heading', 'Link'],
                          isReadOnly: true,
                        }
                      }
                    />

Solution

  • Ok I think I found out what you're looking for:

    Here you have a description of the component properties. On the last one you can see "disabled"

    So you're code would look something like this:

    <CKEditor2
                          editor={DecoupledEditor}
                          data="<p>Hello from CKEditor 5!</p>"
                          disabled=true
                          onInit={editor => {
                            editor.ui.view.editable.element.parentElement.insertBefore(
                              editor.ui.view.toolbar.element,
                              editor.ui.view.editable.element
                            );
                          }}
                          config={
                            {
                              toolbar: ['bold', 'italic', 'bulletedList', '|', 'numberedList', 'alignment'],
                              removePlugins: ['Heading', 'Link'],
                              isReadOnly: true,
                            }
                          }
     />
    

    Also, I think you probably meant <CKEditor instead of <CKEditor2.