為了做在線郵件編輯模板這幾天折騰了好久，也踩了點坑
vue-quill-editor
這是Github上一個基于quill.js的用Vue進(jìn)行二次封裝的開源項目，因為項目開發(fā)用的是Vue，所以就想試一試。
總體來說挺好的，就是自定義組件比較麻煩，但是如果你只需要它已提供的功能就可以不用關(guān)心自定義組件擴展問題。擴展面包板組件需要你去看quill.js然后用quill的語法注冊組件。
另外，把編輯器放到模態(tài)框里使用的時候會有問題，當(dāng)編輯器綁定的content被重新賦值后，雖然watch到了content內(nèi)容變化并重新渲染了，但渲染會有一部分失效（直接被抹除）。
正常樣式：
樣式丟失：
另外一個是quill.js這個富文本編輯器自身的問題了，由于這個編輯器的文本樣式大多是使用自定義css渲染的（注意下面代碼的class="ql-xxx-xxx"），而不是如CKEditor那樣使用原生html標(biāo)簽與style樣式進(jìn)行渲染，所以相當(dāng)于編輯器的內(nèi)容樣式僅在此網(wǎng)頁有效。
<h1 class="ql-align-center"><span class="ql-font-serif">I am Example !</span></h1><p><br></p><p><strong class="ql-font-serif">Whenever you play the game of thrones, you either win or die. There is no middle ground.</strong></p><p><br></p><p><u class="ql-font-serif">Some war against sword and spear to win, and the others the crow and the paper to win.</u></p><p><br></p><p><em class="ql-font-serif">Dead history is write in ink, the living sort in blood.</em></p>
由于我要做的是郵件模板，因此如果將這個編輯器的html content作為郵件發(fā)出，收件人幾乎看不到任何的樣式。所以放棄了
CKEditor
這個同樣也是一個開源富文本編輯器，藍(lán)鵝它和模態(tài)框基本上是會有沖突的，網(wǎng)上有和bootstrap模態(tài)框沖突問題的解決方案，如果你使用別的模態(tài)框和編輯器發(fā)生沖突要自己想辦法，這個解決方案只能解決bootstrap模態(tài)框的問題，因為它使用的是bootstrap注冊的全局事件。不過我親測后發(fā)現(xiàn)iView組件庫的模態(tài)框和CKEditor編輯器不會發(fā)生沖突問題。如果要把編輯器用在模態(tài)框里的話可以考慮使用iView。
這個編輯器自身內(nèi)置了很多功能，并且它可以讓你自由選擇最小安裝包，而且它還支持編輯器定制化：
重要的是，它的編輯器文本的html內(nèi)容是基于html原生標(biāo)簽和style樣式的（可以用于郵件樣式編輯）：
同樣它還支持肥腸多其他開源技術(shù)人員開發(fā)的優(yōu)秀插件：
使用可以參考官方快速啟用教程，如果你選擇的插件都兼容，它會自動生成一個編輯器的config.js配置（我使用的時候發(fā)現(xiàn)如果加入AutoPlaceHolder和Font Size And Family插件會有沖突問題），解壓壓縮包，將解壓后的ckeditor文件夾拷貝到你的項目web根目錄下，運行你的項目，在瀏覽器url欄輸入http://<你的網(wǎng)頁>/ckeditor/samples/index.html，可以參看示例，這個示例上的編輯器樣式是基于ckeditor/config.js文件的。同樣這個示例頁面支持圖形化界面配置你的編輯器樣式，自定義后覆蓋config.js文件內(nèi)的相應(yīng)內(nèi)容即可完成自定義。
CKEditor插件使用
大部分的插件是不需要自己做額外配置的，加入自定義組件列表下載下來以后就可以直接使用。但是有些需要自定義內(nèi)容的插件，比如Font Size And Family、Placeholder Select、token等就需要你對配置文件進(jìn)行少量的配置。
Font Size and Family
這個插件本身支持的字體較少，且沒有中文字體，要添加中文字體很簡單只需要在config.js中加入一行：
config.font_names = '宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;' + config.font_names;
token-replacement-ckeditor-plugin
這個插件是基于Placeholder插件的，它允許你在CKEditor中插入一段token來代替數(shù)據(jù)（用于后期替換文本內(nèi)容），可以像這樣使用這個插件。
只需要在config.js中像下面這樣配置即可：
// 配置 tokens
config.availableTokens = [
["", ""],
["token1", "token1"],
["token2", "token2"],
["token3", "token3"],
];
// 配置token標(biāo)識前后綴
config.tokenStart = '[[';
config.tokenEnd = ']]';
