How can I disable the Quill editor

Question

I have a a template which displays rich text data. When the user clicks edit I turn the template into an editable Quill editor like so:

  'click #editNote': (e, t) ->
    note = t.find '.container'
    console.log note
    basicEditor = new Quill(note)

Then once the user clicks save I want to be able to disable the Quill editor. How can I do this?

score 15 · Answer 1 · edited May 15 '19 at 13:26

15

quill.disable() should do the trick.

edited May 15 '19 at 13:26

answered Dec 04 '16 at 03:20

Shivanshu Goyal

score 14 · Accepted Answer · answered Jul 18 '14 at 21:33

14

This isn't currently documented but you can do this:

basicEditor.editor.enable(false)

answered Jul 18 '14 at 21:33

jhchen

1

Still works on quilljs.com (the editor variable on the homepage is `quill` not `basicEditor`) – jhchen Aug 20 '15 at 20:20
2

@jhchen - enable(false) is making the editor.selection.getRange(); to return null. I wanted to have a readonly version of my text with highlighting enabled. I'm using quill 0.20.1 – Rose Sep 07 '16 at 23:51

score 8 · Answer 3 · answered Mar 22 '17 at 13:31

8

Use this statement

var quill = new Quill('#editor-container');
quill.enable(false);

answered Mar 22 '17 at 13:31

Nikhil Kumar

user2440563 · Answer 4 · 2022-06-12T20:27:38.083

3

Just set the property [readOnly]="true"

Example:

<quill-editor format="html" [readOnly]="true" formControlName="editor"></quill-editor>

edited Jun 12 '22 at 20:27

answered Jun 12 '22 at 20:18

user2440563

score 2 · Answer 5 · answered Feb 24 '21 at 18:44

2

If you are using ngx-quill, use this code:

@ViewChild('quill') quill: QuillEditorComponent;

this.quill.setDisabledState(true);

Work for me

answered Feb 24 '21 at 18:44

Rodrigo Quintas

score 0 · Answer 6 · answered Feb 14 '23 at 14:42

0

You can use this:


let quill = new Quill('#myDiv');
quill.disable();

answered Feb 14 '23 at 14:42

kentuckyss

score -3 · Answer 7 · answered May 16 '21 at 06:27

-3

Getting quill undefined, we need to import ngx-quill in component.

answered May 16 '21 at 06:27

7 Answers7