将原始html代码插入到quill中

概述是否可以选择将原始html代码插入到quill中？ quill.insertText();quill.clipboard.dangerouslyPasteHTML() 两者都是由matcher解析的,但我需要为电子邮件页脚粘贴格式正确的html代码. 如果页脚内容是静态且不可编辑的,则可以通过 extending阻止EmbEmbed印迹,然后在工具栏中为新格式添加一个按钮.有两种不同的方法可以处 是否可以选择将原始HTML代码插入到quill中？

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

两者都是由matcher解析的,但我需要为电子邮件页脚粘贴格式正确的HTML代码.

解决方法 如果页脚内容是静态且不可编辑的,则可以通过 extending阻止EmbEmbed印迹,然后在工具栏中为新格式添加一个按钮.有两种不同的方法可以处理HTML get输入到新格式的内容.

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','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',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中全部内容，希望文章能够帮你解决将原始html代码插入到quill中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。