Quill—心目中的最佳富文本编辑器
Quill—心目中的最佳富文本编辑器
由于长时间使用 UEditor 编辑器,再加上 UEditor 界面实在不够清新,不符合我的审美,遂决定给网站后台换一个富文本编辑器,经过几天的寻找以及试用,终于找到了符合我这强迫症的最完美的编辑器,它就是——Quill。
几大编辑器比较
UEditor
链接:https://ueditor.baidu.com/website/
这款编辑器应该很多人都用过吧,说实话,它的功能在我看来是最全面、最强大的,不仅包含丰富的文本样式编辑,还有强大的表格编辑功能,插入功能,而且接入十分简单,可惜的是官方早就不再更新了,所以样式看起来不那么“主流”,不过这个就见仁见智了,并不影响它成为一款优秀的富文本编辑器。
![](https://upload-images.jianshu.io/upload_images/716745-3195ab20a4c64630.png?imageMogr2/auto-orient/strip|imageView2/2/w/868/format/webp)
Simditor
这款编辑器满足基本的需求,但插件不是很多,样式比较清新好看,对于我来说少了字体颜色的设置,代码高亮也不甚理想,要求不高的可以使用这款。
![](https://upload-images.jianshu.io/upload_images/716745-f4dee0b4113b700c.png?imageMogr2/auto-orient/strip|imageView2/2/w/966/format/webp)
wangEditor
这款编辑器是国内一个开发者开源的,功能基本足够,样式主流,但文档中说明了“从编辑器中获取的 html 代码是不包含任何样式的纯 html”,就是说需要自己编写样式,但相对来说灵活多变,可以自己实现多皮肤功能
![](https://upload-images.jianshu.io/upload_images/716745-fe10775b45771284.png?imageMogr2/auto-orient/strip|imageView2/2/w/1105/format/webp)
CKEditor
这款也算中规中矩吧,有基本功能,但看了一圈还是没有我需要的字体颜色跟代码高亮功能,但值得一提的是,它有行内编辑功能,编辑内容更加直观,仿佛是在编辑网页一样,这个功能还是挺强大的。
![](https://upload-images.jianshu.io/upload_images/716745-67370fce71226726.png?imageMogr2/auto-orient/strip|imageView2/2/w/1136/format/webp)
TinyMCE
这款编辑器很漂亮,功能也非常多,编辑出的文章样式也十分美观,代码高亮功能实现的也可以,但它却是我最不喜欢的一款,因为我觉得它太重了,类似于word的菜单功能虽多,但隐藏较深,操作步骤变多,这很影响编辑文章的速度以及注意力,当然最常用的几个功能还是显式,所以就见仁见智吧。
![](https://upload-images.jianshu.io/upload_images/716745-27257a4d07251ade.png?imageMogr2/auto-orient/strip|imageView2/2/w/894/format/webp)
Froala
这款被很多人称为史上最NB的编辑器,的确它功能强大,插件丰富,可自定义主题和插件,我简单使用了一下,没有我需要的代码高亮,所以果断放弃,或许它可以自定义配置,但我没有深究。
![](https://upload-images.jianshu.io/upload_images/716745-2368641bf73101cc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1144/format/webp)
Quill
寻寻觅觅,寻寻觅觅,终于找到你,最符合我需求的编辑器——quill,样式不用多说,也是主流的黑白清新风,美观,功能上虽然不是很多,甚至还没有表格,网络图片上传(可以通过复制网络图片并黏贴解决)等功能,但它的代码高亮是最完美的,因为它本身就支持了hignlight.js
,同样支持行内编辑模式,可自定义,总的来说,这是一款优点多但缺点同样明显的编辑器,但却完美契合我的需求,所以我比较喜爱这款。
![](https://upload-images.jianshu.io/upload_images/716745-cf10ffb9d3cf6a2c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1096/format/webp)
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