Quill.js - Unable to get selection range on a readOnly:true editor in Quill.js 0.20.1 -

1
votes

Tool: Quill.js USE CASE To let user select a text range in a readOnly editor and apply highlighting.

Detailed Context I'm maintaining some code that's using Quill 0.20.1. I've created a readOnly:true editor to disable the content from getting changed. Even though text content in editor is readOnly I still want the user to be able to select, highlight and associate some metadata that references the selection made. (Basically I wanted to read what selection range the user made on quill editor)

So I tried the following:

readOnlyHighlightable.quill.editor.selection.getRange(); // And it did not work

And trying to listen on event "selection-change" also doesn't seem to get invoked by events.

readOnlyHighlightable.quill.on("selection-change", function (range) {
    console.log(range);
});

In contrast if I remove the readOnly flag from quill editor constructor it works well. Is this the desired behavior? Why is a readOnly editor not selectable?

Finally, I created a plain editor (theme: snow and formats: ["background"]) and I tried disabling the editor with the following function and still the range function doesn't return the selected range.

quill.editor.enable(false);

If I do not call the enable(false) function, getRange() works fine.

Ref Range function: quill.editor.selection.getRange();

Disable function: quill.editor.enable(false);

PS. I'm excited about Quill 1.0 but this I've to implement this feature in Quill.js 0.20.1.

1
javascriptjqueryquill
Did you ever figure this out? – justinmoon

1 Answers

0
votes

Quill selection works on the presumption that the editor is the current 'active' element. But from the browser's perspective, disabled content-editable div is not active. So you can work around this by setting tab index:1 on it so the browser returns true on "is active element"

$("#ql-editor-1").attr("tabIndex", 1);
myEditor.quill.editor.selection.getRange();

Hope this helps.