如何把quill过滤html,HTML富文本编辑器Quill的使用

平台自动发送邮件的功能需要添加正文编辑，即需要提供在线编辑富文本，并将对应html传回后台。

富文本编辑器使用quill.js

quill的风格较为简洁美观，提供了带toolbar的snow和不带toolbar的bubble两种主题

Demo

snow

Quill引用

npm下载： npm install quill@1.2.0; 或者release直接下载源文件

引用文件存放在/dist目录下，复制到项目中

html中添加

var quill = new Quill('#editor', {

theme: 'snow'

});

ToolBar

toolbar的自定义：

var toolbarOptions = [

['bold', 'italic', 'underline', 'strike'], // toggled buttons

['blockquote', 'code-block'],

[{ 'header': 1 }, { 'header': 2 }], // custom button values

[{ 'list': 'ordered'}, { 'list': 'bullet' }],

[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript

[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent

[{ 'direction': 'rtl' }], // text direction

[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown

[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme

[{ 'font': [] }],

[{ 'align': [] }],

['clean'] // remove formatting button

];

var quill = new Quill('#editor', {

modules: {

toolbar: toolbarOptions

},

theme: 'snow'

});

文本对应Html获取

quill取消了getHtml()的API，getContents()返回的是Delta对象，一种JSON数组，getText()返回文本域里对应字符串。

因平台需将用户编辑的格式传回后台生成邮件的正文，而邮件的正文是Html格式，通过查issue找到获取Html的方法：quill.container.firstChild.innerHTML