Я хочу добавить пару готовых ярлыков, таких как
<div class="label"> Label Text <span>x</span><div>
к содержимому html в редакторе quill. Добавить такой тег не должно быть проблемой само по себе. Однако я не хочу, чтобы пользователь мог редактировать текст внутри метки. Курсор нельзя даже помещать внутрь метки. При удалении все 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' })
);
NB: любой стиль, который вам нужен, может быть применен с классом .ql-label:
.ql-label {
background-color: lightgrey;
padding: 0.3em;
margin: 0 0.2em;
}
.ql-label button {
margin-left: 0.3em;
}
Наконец, наконец: рабочий пример.
