如何在 Embed 印迹扩展中获取 quill 实例？答案

【问题标题】：How to get quill instance within Embed blot extension?如何在 Embed 印迹扩展中获取 quill 实例？
【发布时间】：2021-05-18 14:46:33
【问题描述】：

我正在使用 Angular 和 ngx-quill。我有一个自定义工具栏按钮，它将插入具有某些属性的文本。我想在单击该文本时选择它。

这是我目前所拥有的：

export class InsertDemographic extends Embed {
  static blotName: string = "demographic";
  static tagName: string = "span";
  static className: string = "demographic";

  static create(demographic: Demographic) {
    let node = super.create();
    node.setAttribute('data-demographic_id', demographic.id);
    node.innerHTML = `[${demographic.name.replace(" ","_")}]`;
    node.addEventListener("click", () => {
        console.log(this);
        /* const range = this.quill.getSelection(true);
        this.quill.setSelection(range.index - 1, 1, 'user'); */
    });
    
    return node;
  }

  static value(node){
    return {
        name: node.textContent.replace(/[\[\]]/g,""),
        id: node.dataset.demographic_id
    } as Demographic;
  }
}

我添加了一个单击事件侦听器，它应该获取当前的 quill 实例，以便获取和设置选择。注释代码可以工作，但我不知道如何获取 quill 实例！

目前，此代码位于与我的编辑器组件分开的文件中，该组件扩展了工具栏并映射了自定义图标等。此单独的文件位于组件之外，因此很难管理 quill 实例，不确定正确的方法是什么.

【问题讨论】：

标签： angular quill ngx-quill

【解决方案1】：

简答

这是一个从任何子节点获取Quill 实例的实用方法：

function findQuill(node) {
  while (node) {
    const quill = Quill.find(node);
    if (quill instanceof Quill) return quill;
    node = node.parentElement;
  }
}

长答案

有时尝试从印迹本身访问Quill 实例感觉就像在与 Quill 战斗，这有点反模式。有时，更“Quill-y”的做事方式可能是使用模块：

import Module from 'quill/core/module';

export class Demographics extends Module {
  constructor(quill, options) {
    super(quill, options);
    quill.root.addEventListener('click', (event) => this.handleClick(event));
  }

  handleClick(event) {
    const node = event.target;
    const demographic = node.closest('.demographic');
    if (!demographic) return;
    const blot = Quill.find(node);
    const index = this.quill.getIndex(blot);
    const length = blot.length();
    this.quill.setSelection(index, length);
  }
}

我整理了一个working example（为简单起见，使用strong 标签）。

【讨论】：