天天看點

如何把quill過濾html,HTML富文本編輯器Quill的使用

平台自動發送郵件的功能需要添加正文編輯,即需要提供線上編輯富文本,并将對應html傳回背景。

富文本編輯器使用quill.js

quill的風格較為簡潔美觀,提供了帶toolbar的snow和不帶toolbar的bubble兩種主題

Demo

如何把quill過濾html,HTML富文本編輯器Quill的使用

snow

Quill引用

npm下載下傳: npm install [email protected]; 或者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