Can Quill BlockEmbeds use arbitrary tags?

Question

I\'ve got a bunch of components (pieces of html and logic) that I want to be able to embed inside a Quill document, and I\'m not entirely sure how to get started. Each component

Answer 1

have a looks here and here

if your purpose is create a tag which is not present in QUILL what you have to do is something like this: CONFIGURE YOUR CUSTOM TAG

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

USE YOUR CUSTOM TAG

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

Pay attention, as default this custom will get the attribute display: block you can target it by css rule as example

my-custom-tag {
   display : inline;
}