2

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;
  }
}

選択を取得および設定するために、現在のクイル インスタンスを取得するクリック イベント リスナーを追加しました。コメント付きのコードは機能しますが、クイル インスタンスを取得する方法がわかりません!

現在、このコードは、ツールバーを拡張し、カスタム アイコンなどをマップするエディター コンポーネントとは別のファイルにあります。この別のファイルがコンポーネントの外にあると、クイル インスタンスの管理が難しくなり、正しいアプローチが何であるかわかりません。

4

1 に答える 1