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

Question

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,
                        }
                      }
                    />

Answer 1

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 .

Answer 2

Use editor.enableReadOnlyMode("editor"); Docs

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
  </head>
  <body>
    <div id="editor">Test</div>
    <script>
      ClassicEditor.create(document.querySelector("#editor"), {
        toolbar: [],
      }).then(editor => {
        editor.enableReadOnlyMode("editor");
        console.log(editor);
      }).catch(error => {
        console.error(error);
      });
    </script>
  </body>
</html>

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

Question

2 answers

solution1
1 ACCPTED 2019-02-25 11:29:15

solution2
0 2022-08-17 17:23:45

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

Question

2 answers

solution1 1 ACCPTED 2019-02-25 11:29:15

solution2 0 2022-08-17 17:23:45

solution1
1 ACCPTED 2019-02-25 11:29:15

solution2
0 2022-08-17 17:23:45