前端心目中的最佳富文本編輯器 之 Quill ，你用過那些呢？收藏備用

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

幾大編輯器比較

1、UEditor

連結：https://ueditor.baidu.com/website/

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

2、Simditor

連結：https://simditor.tower.im/

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

3、wangEditor

連結：http://www.wangeditor.com/

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

4、CKEditor

連結：https://ckeditor.com

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

5、TinyMCE

連結：https://www.tiny.cloud/

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

6、Froala

連結：https://www.froala.com/

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

7、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();
}      

完美展示，效果賞心悅目

總結

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