2、Simditor
这款编辑器满足基本的需求,但插件不是很多,样式比较清新好看,对于我来说少了字体颜色的设置,代码高亮也不甚理想,要求不高的可以使用这款。
3、wangEditor
这款编辑器是国内一个开发者开源的,功能基本足够,样式主流,但文档中说明了“从编辑器中获取的 html 代码是不包含任何样式的纯 html”,就是说需要自己编写样式,但相对来说灵活多变,可以自己实现多皮肤功能
4、CKEditor
链接:ckeditor.com
这款也算中规中矩吧,有基本功能,但看了一圈还是没有我需要的字体颜色跟代码高亮功能,但值得一提的是,它有行内编辑功能,编辑内容更加直观,仿佛是在编辑网页一样,这个功能还是挺强大的。
5、TinyMCE
这款编辑器很漂亮,功能也非常多,编辑出的文章样式也十分美观,代码高亮功能实现的也可以,但它却是我最不喜欢的一款,因为我觉得它太重了,类似于word的菜单功能虽多,但隐藏较深,操作步骤变多,这很影响编辑文章的速度以及注意力,当然最常用的几个功能还是显式,所以就见仁见智吧。
6、Froala
这款被很多人称为史上最NB的编辑器,的确它功能强大,插件丰富,可自定义主题和插件,我简单使用了一下,没有我需要的代码高亮,所以果断放弃,或许它可以自定义配置,但我没有深究。
7、Quill
链接:quilljs.com/
寻寻觅觅,寻寻觅觅,终于找到你,最符合我需求的编辑器——quill,样式不用多说,也是主流的黑白清新风,美观,功能上虽然不是很多,甚至还没有表格,网络图片上传(可以通过复制网络图片并黏贴解决)等功能,但它的代码高亮是最完美的,因为它本身就支持了hignlight.js,同样支持行内编辑模式,可自定义,总的来说,这是一款优点多但缺点同样明显的编辑器,但却完美契合我的需求,所以我比较喜爱这款。
===
===
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 其他