平台自動發送郵件的功能需要添加正文編輯,即需要提供線上編輯富文本,并将對應html傳回背景。
富文本編輯器使用quill.js
quill的風格較為簡潔美觀,提供了帶toolbar的snow和不帶toolbar的bubble兩種主題
Demo
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