将原始 html 代码插入到 quill

Question

是否可以选择将原始 html 代码插入 quill？

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

两者都由匹配器解析，但我需要为电子邮件页脚粘贴格式正确的 html 代码。

Answer 1

如果页脚内容是静态且不可编辑的，您可以通过 extending BlockEmbed 印迹然后在工具栏中为您的新格式添加一个按钮来实现。有 2 种不同的方法来处理 HTML 进入新格式的内容。

1。让用户输入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.
    // 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。使用特定的 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>

将原始 html 代码插入到 quill

Insert raw html code to quill

quill

1。让用户输入HTML嵌入：

2。使用特定的 HTML