Quill: insertEmbed() creating new <p> tag

Created on 10 Aug 2016  路  2Comments  路  Source: quilljs/quill

I'm trying to add a custom format to add logical hooks on elements of the editor and I can't find proper documentation on the subject.

The issue I'm facing is that the insertEmbed() function closes the

tag where my focus is on instead of inserting my format where the focus (index) is at.

I would like to add my custom format html directly at the cursor.

Here's my custom code

var Embed = Quill.import('blots/block/embed');
class ProcLink extends Embed {
    static create(value) {
        let node = super.create(value);
        // give it some margin
        node.setAttribute('style', "text-decoration: underline;background-color : lightgreen;");
        node.setAttribute('data-proc', value.value);
        node.innerHTML = value.text;
        return node;
    }
}

ProcLink.blotName = 'proc-link'; 
ProcLink.className = 'proc-link';
ProcLink.tagName = 'span';

Quill.register({
    'formats/proc-link': ProcLink
});

//In another piece of logical code
 var index = quill.getSelection(true).index;//quill is the reference to my instantiated quill obj
 var cObj = {text : text, value : value};
 quill.insertEmbed(index,"proc-link",cObj)
//more code

Expected behavior: [expected]

text bla bla [custom format] moar bla bla

Actual behavior: [actual]

text bla bla

[custom format]

moar bla bla

Platforms: [ex. Chrome 48 on Mac 10.11]
Chrome 52 on Windows 7
Version: [version]
v1.0.0-beta.11

Most helpful comment

You're inheriting from the block level embed. I think you want the inline one so it should be Quill.import('blots/embed') http://codepen.io/quill/pen/EyGoyE. A detailed guide on Parchment is coming soon.

All 2 comments

You're inheriting from the block level embed. I think you want the inline one so it should be Quill.import('blots/embed') http://codepen.io/quill/pen/EyGoyE. A detailed guide on Parchment is coming soon.

Any detailed guide on Prachment now? I am looking for a noneditable embeds in my editor

Was this page helpful?
0 / 5 - 0 ratings