将鼠标悬停在 qill.js 编辑器的文本上时，如何从 getSelection() 检测光标索引？

Question

我在 Web 项目中使用富文本编辑器 quill.js。正如我已经知道的，我可以使用 quill.getSelection() 方法来检索游标的索引。像 getSelection() 一样，我想在用户无需单击的情况下获取光标的索引，即当他将鼠标悬停在编辑器文本上时的光标索引。

我想实现以下功能：当我将鼠标悬停在一个词上时，该网站会向我显示有关该词的信息。为此，我需要游标的当前索引。

我该怎么做？

Answer 1

我找到了解决办法。为此，我使用自己的印迹 AnalysisBlot，它具有自定义属性 analysisid:

let Inline = Quill.import('blots/inline'); 
class AnalysisBlot extends Inline { 
    static create(analysisid) {
        let node = super.create()
        node.setAttribute('analysisid', analysisid);
        return node
    }
} 
AnalysisBlot.blotName = 'analysisitem'; 
AnalysisBlot.tagName = 'analysisitem'; 
Quill.register(AnalysisBlot);

用它创建的每个元素都有自己的ID，在创建过程中传递。对于这个印迹的每个元素，我都添加了一个 hover 事件侦听器： $("analysisitem").hover(enterHoverOverAnalysisItem, leaveHoverOverAnalysisItem);

然后我可以在函数中查询 ID 属性并显示特定于上下文的信息。

将鼠标悬停在 qill.js 编辑器的文本上时，如何从 getSelection() 检测光标索引？

How to detect the cursor index from getSelection() when hovering over the text of a qill.js editor?

javascript

html

jquery

bootstrap-4

quill