如何在Quill编辑器中向内容添加不可编辑的标签 [英] How to add a non editable tag to content in Quill editor

问题描述

我想添加几个预先构建的标签，例如

I want to add a couple of pre-built labels like

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

到羽毛笔编辑器中的html内容.添加这样的标签本身不应该是问题.但是我不希望用户能够编辑标签内的文本.甚至不应将光标放置在标签内.删除时，应删除整个div.整个标签在某种意义上应该像图像一样. 有可能吗?

to the html content in the quill editor. Add such a tag should not be a problem in itself. However I don't want the user to be able to edit the text inside the label. The cursor should not even be allowed to be placed inside the label. On delete the whole div should be deleted. The whole label should act like an image in some sense. Is it possible ?

推荐答案

您应该可以通过编写自己的污点:

You should be able to achieve this by writing your own 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.register(Label);

最后，您可以按与image或其他嵌入相似的方式使用它:

And finally, you can use it in a similar way to an image or other embeds:

quill.updateContents(
  new Delta().insert({ label: 'foo' })
);

注意:所需的任何样式都可以与.ql-label类一起应用:

NB: Any styling you need can be applied with the .ql-label class:

.ql-label {
  background-color: lightgrey;
  padding: 0.3em;
  margin: 0 0.2em;
}

.ql-label button {
  margin-left: 0.3em;
}

最后:一个工作示例.

这篇关于如何在Quill编辑器中向内容添加不可编辑的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！