irules编辑器 十款编辑器

 

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

完美展示，效果赏心悦目