由于長(zhǎng)時(shí)間使用 UEditor 編輯器径缅，再加上 UEditor 界面實(shí)在不夠清新浪漠，不符合我的審美鸵膏，遂決定給網(wǎng)站后臺(tái)換一個(gè)富文本編輯器硕并，經(jīng)過(guò)幾天的尋找以及試用法焰，終于找到了符合我這強(qiáng)迫癥的最完美的編輯器，它就是——Quill鲤孵。
幾大編輯器比較
UEditor
鏈接：https://ueditor.baidu.com/website/
這款編輯器應(yīng)該很多人都用過(guò)吧壶栋，說(shuō)實(shí)話，它的功能在我看來(lái)是最全面普监、最強(qiáng)大的贵试，不僅包含豐富的文本樣式編輯，還有強(qiáng)大的表格編輯功能凯正，插入功能毙玻，而且接入十分簡(jiǎn)單，可惜的是官方早就不再更新了廊散，所以樣式看起來(lái)不那么“主流”桑滩，不過(guò)這個(gè)就見(jiàn)仁見(jiàn)智了，并不影響它成為一款優(yōu)秀的富文本編輯器允睹。
Simditor
這款編輯器滿足基本的需求运准，但插件不是很多，樣式比較清新好看缭受，對(duì)于我來(lái)說(shuō)少了字體顏色的設(shè)置胁澳，代碼高亮也不甚理想，要求不高的可以使用這款米者。
wangEditor
這款編輯器是國(guó)內(nèi)一個(gè)開(kāi)發(fā)者開(kāi)源的韭畸，功能基本足夠宇智，樣式主流，但文檔中說(shuō)明了“從編輯器中獲取的 html 代碼是不包含任何樣式的純 html”胰丁，就是說(shuō)需要自己編寫樣式随橘，但相對(duì)來(lái)說(shuō)靈活多變，可以自己實(shí)現(xiàn)多皮膚功能
CKEditor
這款也算中規(guī)中矩吧锦庸，有基本功能机蔗，但看了一圈還是沒(méi)有我需要的字體顏色跟代碼高亮功能，但值得一提的是酸员，它有行內(nèi)編輯功能蜒车，編輯內(nèi)容更加直觀讳嘱，仿佛是在編輯網(wǎng)頁(yè)一樣幔嗦，這個(gè)功能還是挺強(qiáng)大的。
TinyMCE
這款編輯器很漂亮沥潭，功能也非常多邀泉，編輯出的文章樣式也十分美觀，代碼高亮功能實(shí)現(xiàn)的也可以钝鸽，但它卻是我最不喜歡的一款汇恤，因?yàn)槲矣X(jué)得它太重了，類似于word的菜單功能雖多拔恰，但隱藏較深因谎，操作步驟變多，這很影響編輯文章的速度以及注意力颜懊，當(dāng)然最常用的幾個(gè)功能還是顯式财岔，所以就見(jiàn)仁見(jiàn)智吧。
Froala
這款被很多人稱為史上最NB的編輯器河爹，的確它功能強(qiáng)大匠璧，插件豐富，可自定義主題和插件咸这，我簡(jiǎn)單使用了一下夷恍，沒(méi)有我需要的代碼高亮，所以果斷放棄媳维，或許它可以自定義配置酿雪，但我沒(méi)有深究。
Quill
尋尋覓覓侄刽，尋尋覓覓指黎，終于找到你，最符合我需求的編輯器——quill唠梨，樣式不用多說(shuō)袋励，也是主流的黑白清新風(fēng)，美觀，功能上雖然不是很多茬故，甚至還沒(méi)有表格盖灸，網(wǎng)絡(luò)圖片上傳（可以通過(guò)復(fù)制網(wǎng)絡(luò)圖片并黏貼解決）等功能，但它的代碼高亮是最完美的磺芭，因?yàn)樗旧砭椭С至?code>hignlight.js赁炎，同樣支持行內(nèi)編輯模式，可自定義钾腺，總的來(lái)說(shuō)徙垫，這是一款優(yōu)點(diǎn)多但缺點(diǎn)同樣明顯的編輯器，但卻完美契合我的需求放棒，所以我比較喜愛(ài)這款姻报。
Quill 的使用
快速開(kāi)始
開(kāi)始構(gòu)建一個(gè)quill編輯項(xiàng)目包括引入文件、創(chuàng)建自定義工具欄间螟、創(chuàng)建編輯容器以及初始化這幾部分吴旋。
<!-- 引入css文件 -->
<link rel="stylesheet">
<!-- 自定義編輯器工具欄 -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- 創(chuàng)建編輯容器 -->
<div id="editor">
<p>Hello World!</p>
</div>
<!-- 引入js文件 -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- 初始化編輯器，snow主題 -->
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
quill主要資源介紹
<!-- 主要的庫(kù)文件厢破，js -->
<script src="http://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="http://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- css文件荣瑟，有兩個(gè)主題，snow和bubble -->
<link rel="stylesheet">
<link rel="stylesheet">
<!-- 沒(méi)有主題的核心構(gòu)建, 不必要的模塊（使用不需要引入） -->
<link rel="stylesheet">
<script src="http://cdn.quilljs.com/1.3.6/quill.core.js"></script>
以上就是quill的庫(kù)文件了摩泪，但要實(shí)現(xiàn)代碼高亮的話需要自己引入highlight.js庫(kù)笆焰，只需要引入就可以了，不需要額外的配置见坑，所以完整的引入嚷掠，以我的項(xiàng)目為參考：
// 代碼高亮采用dracula主題，可去highlight官網(wǎng)配置
<link rel="stylesheet">
// 采用snow主題
<link rel="stylesheet">
// highlight.js的主要js文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
// quill的主要js文件
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
創(chuàng)建編輯器
quill的使用也很簡(jiǎn)單鳄梅，引入上面的資源之后就可以開(kāi)始創(chuàng)建編輯器了叠国。
首先需要定義編輯器的工具欄，有兩種方式戴尸，一種是直接html創(chuàng)建粟焊，一種是通過(guò)js創(chuàng)建，相對(duì)來(lái)說(shuō)html更加直觀一些孙蒙，這里就簡(jiǎn)單的放兩個(gè)示例介紹一下项棠。
通過(guò)一個(gè)js數(shù)組來(lái)配置初始化容器：
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 切換按鈕
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // 用戶自定義按鈕值
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // 上標(biāo)/下標(biāo)
[{ 'indent': '-1'}, { 'indent': '+1' }], // 減少縮進(jìn)/縮進(jìn)
[{ 'direction': 'rtl' }], // 文本下劃線
[{ 'size': ['small', false, 'large', 'huge'] }], // 用戶自定義下拉
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // 主題默認(rèn)下拉，使用主題提供的值
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // 清除格式
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
通過(guò)html來(lái)創(chuàng)建工具欄冰初始化容器：
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<button class="ql-formula"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
<div id="editor"></div>
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar-container'
}
});
</script>
ok挎峦，這樣配置并初始化之后就可以完美展示編輯器了香追，來(lái)看一下成果圖：
獲取內(nèi)容
最終的結(jié)果是我們需要獲取編輯的內(nèi)容并保存到服務(wù)器中，這個(gè)不用多講坦胶，獲取容器的內(nèi)容即可透典，但需要注意的是需要在獲取的內(nèi)容外包上兩個(gè)div容器晴楔，不然展示頁(yè)面不能展示編輯時(shí)所見(jiàn)的效果，同樣峭咒，展示界面也需要引入quill的css以及highlight的css税弃。
// 提交表單
function sub_post() {
var html = document.querySelector('#editor').children[0].innerHTML;
html = '<div class="ql-container ql-snow"><div class="ql-editor">'+html+"</div></div>";
$('[name=content]').val(html);
$("#submitForm").submit();
}
完美展示，效果賞心悅目
總結(jié)
更多內(nèi)容可以去網(wǎng)上看文檔凑队，有中文翻譯的则果。編輯器種類繁多，蘿卜青菜各有所愛(ài)漩氨，找到適合自己的就好西壮，當(dāng)然有興趣有時(shí)間的其實(shí)所有的編輯器都可以自行擴(kuò)展出更好看的樣式，使用之余別忘了給作者們一個(gè)贊叫惊。
