Как определить индекс курсора из getSelection() при наведении курсора на текст qill.js редактор?

#javascript #html #jquery #bootstrap-4 #quill

#javascript #HTML #jquery #bootstrap-4 #quill

Вопрос:

Я использую форматированный текстовый редактор quill.js в веб-проекте. Как я уже знаю, я могу использовать quill.getSelection() метод для получения индекса курсора. Как getSelection() Я хотел бы получить индекс курсора без необходимости щелчка пользователем, то есть индекс курсора при наведении курсора на текст редактора.

Я хотел бы реализовать следующую функциональность: при наведении курсора на слово веб-сайт показывает мне информацию об этом слове. Для этого мне нужен текущий индекс курсора.

Как я мог это сделать?

Ответ №1:

Я нашел решение. Для этого я использую свой собственный blot 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);
  

Каждый элемент, созданный с его помощью, имеет свой собственный идентификатор, который передается во время создания. Для каждого элемента этого блота я добавил hover прослушиватель событий:
$("analysisitem").hover(enterHoverOverAnalysisItem, leaveHoverOverAnalysisItem);

Затем в функциях я могу запросить атрибут ID и отобразить информацию, зависящую от контекста.