[英]ngx-quill/quill.js strip custom blots from innerHTML
标题可能会误导您,但我不知道如何更好地对其进行标题。 我想要实现的是twitter-widget,就像嵌入我的自定义污点一样。 为此,我创建了示例“ renderer”类:
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类似的方法,但是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中删除所有自定义元素。
好吧,好像是奇怪的羽毛笔行为。 这只是Quill处理异步请求的方式,因此只需更改为“ renderer”类即可解决我的问题:
export class TestRenderer {
render(id: number, node: HTMLElement) {
node.innerHTML = ``;
setTimeout(() => {
node.innerHTML = `<h1>ELEMENT ${id}</h1>`;
}, 1000);
}
}
预期的输出是:
<test-embeded class="test-embeded" data-id="108962878"></test-embeded><p><br></p>
关闭。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.