Insert raw html code to quill

Question

Is there option to insert raw html code to quill?

quill.insertText();
quill.clipboard.dangerouslyPasteHTML()

both are parsed by matcher but I need to paste exactly formatted html code for an email footer.

Answer 1

If the footer content is meant to be static and un-editable, you can do this by extending the BlockEmbed blot then adding a button for your new format in the toolbar. There are 2 different ways to handle what HTML get's entered into the new format.

1. Let the user enter the HTML to embed:

// Import the BlockEmbed blot.
var BlockEmbed = Quill.import('blots/block/embed');

// Create a new format based off the BlockEmbed.
class Footer extends BlockEmbed {

    // Handle the creation of the new Footer format.
    // The value will be the HTML that is embedded.
    // By default, the toolbar will show a prompt window to get the value.
    static create(value) {

        // Create the node using the BlockEmbed's create method.
        var node = super.create(value);

        // Set the srcdoc attribute to equal the value which will be your html.
        node.setAttribute('srcdoc', value);

        // Add a few other iframe fixes.
        node.setAttribute('frameborder', '0');
        node.setAttribute('allowfullscreen', true);
        node.setAttribute('width', '100%');
        return node;
    }

    // return the srcdoc attribute to represent the Footer's value in quill.
    static value(node) {
        return node.getAttribute('srcdoc');
    }

}

// Give our new Footer format a name to use in the toolbar.
Footer.blotName = 'footer';

// Give it a class name to edit the css.
Footer.className = 'ql-footer';

// Give it a tagName of iframe to tell quill what kind of element to create.
Footer.tagName = 'iframe';

// Lastly, register the new Footer format so we can use it in our editor.
Quill.register(Footer, true);

var quill = new Quill('#editor-container', {
    modules: {
        toolbar: {
            container: ['footer'] // Toolbar with just our footer tool (of course you can add all you want).
        }
    },
    theme: 'snow'
});

.ql-toolbar .ql-footer:before {
  content: 'footer';
}
.ql-editor .ql-footer {
  background: #f7f7f7;
}

<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<div id="editor-container">
  <h1>Test Content</h1>
  <p>Enter a footer</p>
</div>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>

2. Use specific HTML

// Import the BlockEmbed blot.
var BlockEmbed = Quill.import('blots/block/embed');

// Create a new format based off the BlockEmbed.
class Footer extends BlockEmbed {

    // Handle the creation of the new Footer format.
    // The value will be the HTML that is embedded.
    // This time the value is passed from our custom handler.
    static create(value) {

        // Create the node using the BlockEmbed's create method.
        var node = super.create(value);

        // Set the srcdoc attribute to equal the value which will be your html.
        node.setAttribute('srcdoc', value);

        // Add a few other iframe fixes.
        node.setAttribute('frameborder', '0');
        node.setAttribute('allowfullscreen', true);
        node.setAttribute('width', '100%');
        return node;
    }

    // return the srcdoc attribute to represent the Footer's value in quill.
    static value(node) {
        return node.getAttribute('srcdoc');
    }

}

// Give our new Footer format a name to use in the toolbar.
Footer.blotName = 'footer';

// Give it a class name to edit the css.
Footer.className = 'ql-footer';

// Give it a tagName of iframe to tell quill what kind of element to create.
Footer.tagName = 'iframe';

// Register the new Footer format so we can use it in our editor.
Quill.register(Footer, true);

// Specify the HTML that will be embedded.
var footerHTML = '<h1>Footer</h1>'
    + '<p>This is our new footer</p>';

// Create the footer handler.
var footerHandler = function() {

    // Get the cursor location to know where footer will be added.
    var index = this.quill.getSelection(true).index;

    // Insert the footer with the footerHTML.
    this.quill.insertEmbed(index, 'footer', footerHTML);
};

// Import the Toolbar module so we can add a custom handler to our footer button.
var Toolbar = Quill.import('modules/toolbar');

// Add our custom footer handler to the footer button.
Toolbar.DEFAULTS.handlers['footer'] = footerHandler;

var quill = new Quill('#editor-container', {
    modules: {
        toolbar: {
            container: ['footer'] // Toolbar with just our footer tool (of course you can add all you want).
        }
    },
    theme: 'snow'
});

.ql-toolbar .ql-footer:before {
  content: 'footer';
}
.ql-editor .ql-footer {
  background: #f7f7f7;
}

<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<div id="editor-container">
  <h1>Test Content</h1>
  <p>Enter a footer</p>
</div>
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>