Quill—心目中的最佳富文本編輯器

由於長時間使用 UEditor 編輯器，再加上 UEditor 界面實在不夠清新，不符合我的審美，遂決定給網站后台換一個富文本編輯器，經過幾天的尋找以及試用，終於找到了符合我這強迫症的最完美的編輯器，它就是——Quill。

幾大編輯器比較

UEditor

鏈接：https://ueditor.baidu.com/website/

這款編輯器應該很多人都用過吧，說實話，它的功能在我看來是最全面、最強大的，不僅包含豐富的文本樣式編輯，還有強大的表格編輯功能，插入功能，而且接入十分簡單，可惜的是官方早就不再更新了，所以樣式看起來不那么“主流”，不過這個就見仁見智了，並不影響它成為一款優秀的富文本編輯器。

 

Simditor

鏈接：https://simditor.tower.im/

這款編輯器滿足基本的需求，但插件不是很多，樣式比較清新好看，對於我來說少了字體顏色的設置，代碼高亮也不甚理想，要求不高的可以使用這款。

 

wangEditor

鏈接：http://www.wangeditor.com/

這款編輯器是國內一個開發者開源的，功能基本足夠，樣式主流，但文檔中說明了“從編輯器中獲取的 html 代碼是不包含任何樣式的純 html”，就是說需要自己編寫樣式，但相對來說靈活多變，可以自己實現多皮膚功能

 

CKEditor

鏈接：https://ckeditor.com

這款也算中規中矩吧，有基本功能，但看了一圈還是沒有我需要的字體顏色跟代碼高亮功能，但值得一提的是，它有行內編輯功能，編輯內容更加直觀，仿佛是在編輯網頁一樣，這個功能還是挺強大的。

 

TinyMCE

鏈接：https://www.tiny.cloud/

這款編輯器很漂亮，功能也非常多，編輯出的文章樣式也十分美觀，代碼高亮功能實現的也可以，但它卻是我最不喜歡的一款，因為我覺得它太重了，類似於word的菜單功能雖多，但隱藏較深，操作步驟變多，這很影響編輯文章的速度以及注意力，當然最常用的幾個功能還是顯式，所以就見仁見智吧。

 

Froala

鏈接：https://www.froala.com/

這款被很多人稱為史上最NB的編輯器，的確它功能強大，插件豐富，可自定義主題和插件，我簡單使用了一下，沒有我需要的代碼高亮，所以果斷放棄，或許它可以自定義配置，但我沒有深究。

 

Quill

鏈接：https://quilljs.com/

尋尋覓覓，尋尋覓覓，終於找到你，最符合我需求的編輯器——quill，樣式不用多說，也是主流的黑白清新風，美觀，功能上雖然不是很多，甚至還沒有表格，網絡圖片上傳（可以通過復制網絡圖片並黏貼解決）等功能，但它的代碼高亮是最完美的，因為它本身就支持了hignlight.js，同樣支持行內編輯模式，可自定義，總的來說，這是一款優點多但缺點同樣明顯的編輯器，但卻完美契合我的需求，所以我比較喜愛這款。

 

Quill 的使用

快速開始

開始構建一個quill編輯項目包括引入文件、創建自定義工具欄、創建編輯容器以及初始化這幾部分。

<!-- 引入css文件 --> <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"> <!-- 自定義編輯器工具欄 --> <div id="toolbar"> <button class="ql-bold">Bold</button> <button class="ql-italic">Italic</button> </div> <!-- 創建編輯容器 --> <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主要資源介紹

<!-- 主要的庫文件，js --> <script src="//cdn.quilljs.com/1.3.6/quill.js"></script> <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script> <!-- css文件，有兩個主題，snow和bubble --> <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"> <!-- 沒有主題的核心構建, 不必要的模塊（使用不需要引入） --> <link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet"> <script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script> 

以上就是quill的庫文件了，但要實現代碼高亮的話需要自己引入highlight.js庫，只需要引入就可以了，不需要額外的配置，所以完整的引入，以我的項目為參考：

// 代碼高亮采用dracula主題，可去highlight官網配置 <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css" rel="stylesheet"> // 采用snow主題 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" 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>

創建編輯器

quill的使用也很簡單，引入上面的資源之后就可以開始創建編輯器了。

首先需要定義編輯器的工具欄，有兩種方式，一種是直接html創建，一種是通過js創建，相對來說html更加直觀一些，這里就簡單的放兩個示例介紹一下。

通過一個js數組來配置初始化容器：

var toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // 切換按鈕 ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // 用戶自定義按鈕值 [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], // 上標/下標 [{ 'indent': '-1'}, { 'indent': '+1' }], // 減少縮進/縮進 [{ 'direction': 'rtl' }], // 文本下划線 [{ 'size': ['small', false, 'large', 'huge'] }], // 用戶自定義下拉 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], // 主題默認下拉，使用主題提供的值 [{ 'font': [] }], [{ 'align': [] }], ['clean'] // 清除格式 ]; var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); 

通過html來創建工具欄冰初始化容器：

<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，這樣配置並初始化之后就可以完美展示編輯器了，來看一下成果圖：

 

獲取內容

最終的結果是我們需要獲取編輯的內容並保存到服務器中，這個不用多講，獲取容器的內容即可，但需要注意的是需要在獲取的內容外包上兩個div容器，不然展示頁面不能展示編輯時所見的效果，同樣，展示界面也需要引入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(); } 

完美展示，效果賞心悅目

 

總結

更多內容可以去網上看文檔，有中文翻譯的。編輯器種類繁多，蘿卜青菜各有所愛，找到適合自己的就好，當然有興趣有時間的其實所有的編輯器都可以自行擴展出更好看的樣式，使用之余別忘了給作者們一個贊。