Question

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

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

我相信我在文档中的某处读到块级Blots必须指定tagName 或 a className，但我无法找到那。我可以使用BlockEmbed指定tagName找到All的examples，而Parchment docs并未真正解释它。是否有正确的方式应该这样做，是否有任何我应该注意的边缘情况？

所有这些组件都是块级的，所以（从我对this issue的解读）我不认为选择应该是一个问题，对吗？

Answer 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(MathQuillFormula);

使用您的自定义标记

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

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

1 个答案: