Quill—心目中的最佳富文本编辑器

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

完美展示，效果赏心悦目

 

总结

更多内容可以去网上看文档，有中文翻译的。编辑器种类繁多，萝卜青菜各有所爱，找到适合自己的就好，当然有兴趣有时间的其实所有的编辑器都可以自行扩展出更好看的样式，使用之余别忘了给作者们一个赞。