Как добавить нередактируемый тег к контенту в редакторе Quill

Question

Я хочу добавить пару готовых ярлыков, таких как

<div class="label"> Label Text <span>x</span><div>

к содержанию HTML в редакторе иглы. Добавление такого тега не должно быть проблемой само по себе. Однако я не хочу, чтобы пользователь мог редактировать текст внутри ярлыка. Курсор даже не должен размещаться внутри метки. На удаление всего div должны быть удалены. Весь ярлык должен действовать в некотором смысле как изображение. Является ли это возможным?

Answer 1

Вы должны быть в состоянии достичь этого, написав свой собственный блот:

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;
}

Наконец, наконец: рабочий пример.