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

试着听取事件＆＃34;选择 - 改变＆＃34;也似乎没有被事件调用。

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

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

最后，我创建了一个普通的编辑器（主题：雪和格式：[＆＃34;背景＆＃34;]），我尝试使用以下功能禁用编辑器，但仍然没有返回范围功能选定的范围。

quill.editor.enable(false);

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

参考 范围功能： quill.editor.selection.getRange（）;

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

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();

希望这有帮助。