我想添加一些预建标签,例如
<div class="label"> Label Text <span>x</span><div>
到 quill 编辑器中的 html 内容。添加这样的标签本身应该不是问题。但是我不希望用户能够编辑标签内的文本。甚至不应该允许将光标放置在标签内。删除时,应删除整个 div
。从某种意义上说,整个标签应该像一个图像。
这可能吗?
最佳答案
您应该能够通过编写自己的 Blot 来实现此目的:
class Label extends Parchment.Embed {
static create(value) {
const node = super.create(value);
node.innerText = value;
// Remember to set this so users can't edit
// the label's content
node.contentEditable = 'false';
this._addRemovalButton(node);
return node;
}
static value(node) {
// Only return the text of the first child
// node (ie the text node), otherwise the
// value includes the contents of the button
return node.childNodes[0].textContent;
}
static _addRemovalButton(node) {
const button = document.createElement('button');
button.innerText = 'x';
button.onclick = () => node.remove();
button.contentEditable = 'false';
node.appendChild(button);
// Extra span forces the cursor to the end of
// the label, otherwise it appears inside the
// removal button
const span = document.createElement('span');
span.innerText = ' ';
node.appendChild(span);
}
}
Label.blotName = 'label';
Label.tagName = 'SPAN';
Label.className = 'ql-label';
你register它与鹅毛笔:
Quill.register(Label);
最后,您可以以类似于图像
或其他embeds的方式使用它。 :
quill.updateContents(
new Delta().insert({ label: 'foo' })
);
注意:您需要的任何样式都可以通过 .ql-label
类应用:
.ql-label {
background-color: lightgrey;
padding: 0.3em;
margin: 0 0.2em;
}
.ql-label button {
margin-left: 0.3em;
}
最后:a working example .
关于reactjs - 如何在 Quill 编辑器中向内容添加不可编辑标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39601992/