我将 Quill 用于我的发送邮件表单,并且在我的工具栏中,我有一个带有签名的下拉列表。
当我选择一个签名时,我必须在编辑器中插入自定义和复杂的 html 代码(格式化并带有 img),当我更改签名时,我必须替换插入的 html 代码。
我将代码插入到指定 id 的 p 标签中,但 Quill 清除了代码并删除了 id,因此我找不到 p 标签。
我需要保留 html 代码和 id。
有人可以帮助我吗?
请。
最佳答案
你必须写一个自定义 Blot , 像这样:
class Signature extends BlockEmbed {
static create(value) {
const node = super.create(value);
node.contentEditable = 'false';
this._addSignature(node, value);
return node;
}
static value(node) {
return node.getAttribute(Signature.blotName)
}
static _addSignature(node, value) {
node.setAttribute(Signature.blotName, value);
// This is a simple switch, but you can use
// whatever method of building HTML you need.
// Could even be async.
switch (value) {
case 1:
return this._addSignature1(node);
default:
throw new Error(`Unknown signature type ${ value }`);
}
}
static _addSignature1(node) {
const div = document.createElement('DIV');
div.textContent = 'Signature with image';
const img = document.createElement('IMG');
img.src = 'https://example.com/image.jpg';
node.appendChild(div);
node.appendChild(img);
}
}
Signature.blotName = 'signature';
Signature.tagName = 'DIV';
Signature.className = 'ql-signature';
确保您register它:
Quill.register(Signature);
然后你可以像这样使用它:
quill.updateContents([
{ insert: { signature: 1 } },
]);
关于angular - 将自定义 html 插入 quill 编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55161961/