1

工具：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 中实现这个功能。

4

1 回答 1

0

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

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

希望这可以帮助。

于 2016-09-15T21:21:08.967 回答