Quill.js - 无法在Quill.js 0.20.1中的readOnly：true编辑器中获取选择范围 -

Question

工具：Quill.js 使用案例让用户在readOnly编辑器中选择文本范围并应用突出显示。

详细的上下文我正在维护一些使用Quill 0.20.1的代码。 我创建了一个readOnly：true编辑器来禁止内容被更改。 即使编辑器中的文本内容是只读的，我仍然希望用户能够选择，突出显示并关联一些引用所做选择的元数据。 （基本上我想读一下用户在羽毛笔编辑器上做出的选择范围）

所以我尝试了以下方法：

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

并且试图听取事件“选择 - 改变”似乎也没有被事件调用。

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

相反，如果我从quill编辑器构造函数中删除readOnly标志，它运行良好。 这是理想的行为吗？ 为什么readOnly编辑器不可选？

最后，我创建了一个普通的编辑器（主题：snow和格式：[“background”]），我尝试使用以下函数禁用编辑器，但仍然是范围函数不返回所选范围。

quill.editor.enable(false);

如果我不调用enable（false）函数，getRange（）可以正常工作。

参考范围函数：quill.editor.selection.getRange（）;

禁用功能：quill.editor.enable（false）;

PS。 我对Quill 1.0很兴奋，但我要在Quill.js 0.20.1中实现这个功能。

Answer 1

Quill选择的工作原理是编辑器是当前的“活动”元素。 但是从浏览器的角度来看，禁用内容可编辑的div不活动。 所以你可以通过设置tab index：1来解决这个问题，所以浏览器在“is active element”上返回true

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

希望这可以帮助。