html 复制给quill,将原始html代码插入到quill中

最新推荐文章于 2024-09-01 19:30:28 发布

FPGA hdl

最新推荐文章于 2024-09-01 19:30:28 发布

阅读量1.6k

点赞数

文章标签： html 复制给quill

本文介绍了如何在Quill编辑器中创建一个新的格式'Footer'，允许用户通过两种方式处理HTML格式输入：1. 用户输入要嵌入的HTML；2. 使用特定的HTML。详细步骤包括创建新的BlockEmbed类、设置属性和注册新格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1。让用户输入要嵌入的HTML：

select store, product, count(*) as total

from sales s

group by store, product

having count(*) = (

select top 1 count(*)

from sales

where store = s.store

group by store, product

order by count(*) desc

)

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

}

2。使用特定的HTML

Test Content

Enter a footer

// 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 = '

Footer

+ '

This is our new footer

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