Mark some content as uneditable inside Quilljs container

Question

Is it possible to mark some content inside a quill container as unmodifiable? For example, suppose the starting container div is:

<div id="editor-container">
   <h1>This should not be editable.</h1>
</div>

And my javascript is simply:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  theme: 'snow'
});

I tried setting the contenteditable attribute on the heading to false but that didn't help. The heading was still editable in the resulting Quill editor. I also tried adding a "readonly" attribute but that didn't work either.

I have created the this jsfiddle to show the readonly and contenteditable attempts.

Any ideas on how to do this would be greatly appreciated!

This could be of use to you: http://stackoverflow.com/questions/14615551/html-contenteditable-with-non-editable-islands Seems like there might not be a good solution in the general case. — Michael Tontchev, Jan 26 '17 at 17:50

score -3 · Answer 1 · answered Jun 14 '17 at 11:28

-3

this should be fine

basicEditor.editor.disable();
basicEditor.editor.enable();

answered Jun 14 '17 at 11:28

Aleksandr Golovatyi

1,033
1
11
18

score -3 · Answer 2 · answered Jul 17 '18 at 09:37

-3

We can use existing function to disable editor Quilljs Docs

quill.enable(false);
quill.disable();

answered Jul 17 '18 at 09:37

Chenna

2,383
3
20
36

Mark some content as uneditable inside Quilljs container

2 Answers2