前端心目中的最佳富文本编辑器 之 Quill ,你用过那些呢?收藏备用

148 阅读4分钟

2、Simditor


链接:simditor.tower.im/

这款编辑器满足基本的需求,但插件不是很多,样式比较清新好看,对于我来说少了字体颜色的设置,代码高亮也不甚理想,要求不高的可以使用这款。

99f3b2037bff7c215e0597216418bc1b.png



3、wangEditor


链接:www.wangeditor.com/

这款编辑器是国内一个开发者开源的,功能基本足够,样式主流,但文档中说明了“从编辑器中获取的 html 代码是不包含任何样式的纯 html”,就是说需要自己编写样式,但相对来说灵活多变,可以自己实现多皮肤功能

78e299b1441b1602a37b0643f0cc179e.png



4、CKEditor


链接:ckeditor.com

这款也算中规中矩吧,有基本功能,但看了一圈还是没有我需要的字体颜色跟代码高亮功能,但值得一提的是,它有行内编辑功能,编辑内容更加直观,仿佛是在编辑网页一样,这个功能还是挺强大的。

17355a8fc83f102ec8ea6752e7006bb2.png




5、TinyMCE


链接:www.tiny.cloud/

这款编辑器很漂亮,功能也非常多,编辑出的文章样式也十分美观,代码高亮功能实现的也可以,但它却是我最不喜欢的一款,因为我觉得它太重了,类似于word的菜单功能虽多,但隐藏较深,操作步骤变多,这很影响编辑文章的速度以及注意力,当然最常用的几个功能还是显式,所以就见仁见智吧。

65b807a4fe874235ebec89e732d99bfe.png



6、Froala


链接:www.froala.com/

这款被很多人称为史上最NB的编辑器,的确它功能强大,插件丰富,可自定义主题和插件,我简单使用了一下,没有我需要的代码高亮,所以果断放弃,或许它可以自定义配置,但我没有深究。

36f498d4daa644095851a53c684dea4e.png




7、Quill


链接:quilljs.com/

寻寻觅觅,寻寻觅觅,终于找到你,最符合我需求的编辑器——quill,样式不用多说,也是主流的黑白清新风,美观,功能上虽然不是很多,甚至还没有表格,网络图片上传(可以通过复制网络图片并黏贴解决)等功能,但它的代码高亮是最完美的,因为它本身就支持了hignlight.js,同样支持行内编辑模式,可自定义,总的来说,这是一款优点多但缺点同样明显的编辑器,但却完美契合我的需求,所以我比较喜爱这款。

0ab2628adeb7fc21a898d14d5f51fd5b.png

===

===

Quill 的使用

=============

快速开始


开始构建一个quill编辑项目包括引入文件、创建自定义工具栏、创建编辑容器以及初始化这几部分。

Bold

Italic

Hello World!

quill主要资源介绍



以上就是quill的库文件了,但要实现代码高亮的话需要自己引入highlight.js库,只需要引入就可以了,不需要额外的配置,所以完整的引入,以我的项目为参考:

// 代码高亮采用dracula主题,可去highlight官网配置

// 采用snow主题

// highlight.js的主要js文件

// quill的主要js文件

创建编辑器


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来创建工具栏冰初始化容器:

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享:docs.qq.com/doc/DSmRnRG…