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;
}
}
選択を取得および設定するために、現在のクイル インスタンスを取得するクリック イベント リスナーを追加しました。コメント付きのコードは機能しますが、クイル インスタンスを取得する方法がわかりません!
現在、このコードは、ツールバーを拡張し、カスタム アイコンなどをマップするエディター コンポーネントとは別のファイルにあります。この別のファイルがコンポーネントの外にあると、クイル インスタンスの管理が難しくなり、正しいアプローチが何であるかわかりません。