Quill BlockEmbeds 可以使用任意标签吗？答案

【问题标题】：Can Quill BlockEmbeds use arbitrary tags?Quill BlockEmbeds 可以使用任意标签吗？
【发布时间】：2017-07-31 17:26:05
【问题描述】：

我有一堆组件（html 和逻辑片段），希望能够嵌入到 Quill 文档中，但我不完全确定如何开始。每个组件都有一个根元素，但 tagName 是任意的（有aside、div、section 等标签）。每个组件都具有完全非 Quill 的编辑体验（在其他地方处理），因此理想情况下，它们的 delta 应该如下所示：

{
  ops: [
    { insert: 'Hello', attributes: { bold: true } },
    { insert: { component: 'domain.com/components/image/instances/foo' } },
    { insert: 'World!\n' }
  ]
}

我相信我在文档中的某处读到块级 Blots 必须指定 tagName 或 className，但我找不到相关参考。 examples 中的All 我可以找到使用BlockEmbed 指定tagName，而Parchment docs 并没有真正解释它。有没有一种正确的方式应该这样做，有没有我应该注意的边缘情况？

所有这些组件都是块级的，所以（根据我对this issue 的阅读）我认为选择应该不是问题，对吧？

【问题讨论】：

我相信github.com/quilljs/parchment#blots 是您正在寻找的参考。我正计划为 Parchment 编写更多/更好的文档，但听起来你想继承 BlockEmbed (blots/block.js)，因为编辑体验在别处。
啊，是的，我就是这么想的。具体来说，“至少必须使用静态blotName 命名Blot，并与tagName 或className 关联”如果我定义了className 但没有定义tagName，会发生什么情况？我在实践中找不到任何这样的例子（来自 StackOverflow、github 问题等）

标签： javascript quill parchment

【解决方案1】：

看看here和here

如果您的目的是创建一个 QUILL 中不存在的标签你必须做的是这样的： 配置您的自定义标签

 var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
    static create(paramValue) {
        let node = super.create();
        node.innerHTML = paramValue;
        //node.setAttribute('contenteditable', 'false');
        //node.addEventListener('click', MyCustomTag.onClick);
        return node;
    }

    static value(node) {
        return node.innerHTML;
    }
}

MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
     //do something
 }*/

Quill.register(MyCustomTag);

使用您的自定义标签

this.editor.insertEmbed(
0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT, 
'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG
 '<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT 
);

注意，默认情况下，此自定义将获取属性display: block 您可以通过 css 规则来定位它，例如

my-custom-tag {
   display : inline;
}

【讨论】：