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

【问题标题】：Quill.js - Unable to get selection range on a readOnly:true editor in Quill.js 0.20.1 -Quill.js - 无法在 Quill.js 0.20.1 中的 readOnly:true 编辑器上获取选择范围 -
【发布时间】：2016-09-06 23:59:10
【问题描述】：

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

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

所以我尝试了以下方法：

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

并且尝试监听事件“selection-change”似乎也没有被事件调用。

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

相比之下，如果我从 quill 编辑器构造函数中删除 readOnly 标志，它工作得很好。这是期望的行为吗？为什么只读编辑器不可选？

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

quill.editor.enable(false);

如果我不调用 enable(false) 函数，getRange() 工作正常。

参考范围功能： quill.editor.selection.getRange();

禁用功能： quill.editor.enable(false);

PS。我对 Quill 1.0 感到很兴奋，但我必须在 Quill.js 0.20.1 中实现此功能。

【问题讨论】：

你有没有想过这个问题？

标签： javascript jquery quill

【解决方案1】：

Quill 选择的工作前提是编辑器是当前的“活动”元素。但从浏览器的角度来看，禁用的内容可编辑 div 是不活动的。因此，您可以通过在其上设置选项卡索引：1 来解决此问题，以便浏览器在“是活动元素”上返回 true

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

希望这会有所帮助。

【讨论】：