我想添加一些预建标签,例如
<div class="label"> Label Text <span>x</span><div>
到鹅毛笔编辑器中的 html 内容。添加这样的标签本身应该不是问题。但是我不希望用户能够编辑标签内的文本。甚至不应该允许将光标放置在标签内。全部删除时div
应该删除。从某种意义上说,整个标签应该像一个图像。
是否可以 ?
您应该能够通过编写自己的代码来实现这一目标Blot https://github.com/quilljs/parchment/#blots:
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';
You register https://github.com/quilljs/parchment/#registry它与鹅毛笔:
Quill.register(Label);
最后,您可以以类似于image
或其他embeds https://quilljs.com/docs/formats/#embeds:
quill.updateContents(
new Delta().insert({ label: 'foo' })
);
注意:您需要的任何样式都可以应用.ql-label
class:
.ql-label {
background-color: lightgrey;
padding: 0.3em;
margin: 0 0.2em;
}
.ql-label button {
margin-left: 0.3em;
}
最后最后:a工作示例 https://codepen.io/alecgibson/pen/EJWEoV.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)