javascript - Can Quill BlockEmbeds use arbitrary tags? - Stack Overflow

admin管理员组

文章数量:1302268

I've got a bunch of ponents (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 ponent has a single root element, but the tagName is arbitrary (there are aside, div, section, etc tags). Each of the ponents has a pletely non-Quill editing experience (that's handled elsewhere), so ideally their deltas would just look like this:

{
  ops: [
    { insert: 'Hello', attributes: { bold: true } },
    { insert: { ponent: 'domain/ponents/image/instances/foo' } },
    { insert: 'World!\n' }
  ]
}

I believe I read somewhere in the documentation that block-level Blots must specify a tagName or a className, but I can't find the reference for that. All of the examples I can find using the BlockEmbed specify a tagName, and the Parchment docs don't really explain it. Is there a correct way this should be done, and are there any edge cases I should be aware of?

All of these ponents would be block-level, so (from my reading of this issue) I don't think selection should be a problem, right?

I've got a bunch of ponents (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 ponent has a single root element, but the tagName is arbitrary (there are aside, div, section, etc tags). Each of the ponents has a pletely non-Quill editing experience (that's handled elsewhere), so ideally their deltas would just look like this:

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

I believe I read somewhere in the documentation that block-level Blots must specify a tagName or a className, but I can't find the reference for that. All of the examples I can find using the BlockEmbed specify a tagName, and the Parchment docs don't really explain it. Is there a correct way this should be done, and are there any edge cases I should be aware of?

All of these ponents would be block-level, so (from my reading of this issue) I don't think selection should be a problem, right?

• javascript
• quill
• parchment

Share Improve this question Follow asked Jul 31, 2017 at 17:26 nelsonpecoranelsonpecora 30033 silver badges99 bronze badges 2

• I believe github./quilljs/parchment#blots is the reference you are looking for. I'm planning on writing more/better docs for Parchment but it sounds like you want to inherit BlockEmbed (blots/block.js) since the editing experience is elsewhere. – jhchen Commented Jul 31, 2017 at 22:14
• Ah yep, that's what I was thinking of. Specifically, "At the very minimum a Blot must be named with a static blotName and associated with either a tagName or className" What happens if I define a className but not a tagName? I can't find any examples of this in practice (from StackOverflow, github issues, etc) – nelsonpecora Commented Aug 1, 2017 at 16:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

本文标签： javascriptCan Quill BlockEmbeds use arbitrary tagsStack Overflow