标题可能会误导,但我不知道如何更好地命名它。我想要实现的是像嵌入我的自定义印迹的 twitter-widget。为此,我创建了示例“渲染器”类:
class TestRenderer {
render(id: number, node: HTMLElement) {
node.innerHTML = `<h1>ELEMENT ${id}</h1>`;
}
}
以及扩展 BlockEmbed 的普通 Quill 印迹类
export class TestBlot extends BlockEmbed {
static blotName = 'test';
static tagName = 'test-embeded';
static className = 'test-embeded';
static create(id: any) {
const node = super.create();
node.dataset.id = id;
RENDERER.render(id, node);
node.addEventListener('click', (e) => {
e.preventDefault();
RENDERER.render(666, node);
});
return node;
}
static value(domNode: HTMLElement) {
return domNode.dataset.id;
}
}
我以为我使用了与 twitter-widget tweet-embed 类似的方法,这是我从官方 quill parchment 教程中获得的,但 HTML 输出不同。twitter 被从所有内部 HTML 中剥离,它很简单:
<twitter-embeded class="twitter-embeded" data-id="464454167226904576" contenteditable="false" style="cursor: pointer;"></twitter-embeded>
我的自定义印迹元素如下所示:
<test-embeded class="test-embeded" data-id="742878714"><h1>ELEMENT 742878714</h1></test-embeded>
当我手动删除<h1>ELEMENT 742878714</h1>
编辑器时,仍然可以识别其内容并正确显示所有内容。这是非常无效的方式,我想避免检查整个 Quill HTML 内容并从 innerHTML 中剥离我的所有自定义元素。