我想添加一对预构建的标签,如
<div class="label"> Label Text <span>x</span><div>
到羽毛笔编辑器中的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';
你注册到Quill:
Quill.register(Label);
最后,您可以以类似于image
或其他嵌入的方式使用它:
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;
}
最后终于:一个工作的例子。