我正在使用 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
实例的实用方法:
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
标记)。
关于angular - 如何在嵌入印迹扩展中获取羽毛笔实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64705524/