主流富文本编辑器对比
前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。
-
wangEditor(国产,基于javascript和css开发的web富文本编辑器,开源免费)优势:轻量简介,最重要的是开源且中文文档齐全。缺点:更新不及时。没有强大的开发团队支撑。
-
UEditor(百度)优势:插件多,基本曼度各种需求,由百度web前端研发部开发。缺点:插件提交较大,网页加载速度相对就慢了些。使用复杂。属于前后端不分离插件。在使用时需要配置后端的一些东西,使用不便。
-
Kindeditor () 优势:文档齐全,为中文,阅读方便。缺点:图片上传存在问题,上传历史过多,会全部加载,导致浏览器卡顿。
-
补充:Tinymce也是一款不错的富文本编辑器,种植,各有优势和劣势,关键是选择一款最适合的就好。因为笔者在开发vue,所以直接使用vue-quill-editor较为方便些。具体看情况使用。
-
vue-quill-editor基本配置
npm install vue-quill-editor -s
main.js中引入
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);
使用
需要注意的是toolbar的配置
1. 只需要填写功能名的
加粗 - bold; 斜体 - italic 下划线 - underline 删除线 - strike 引用- blockquote 代码块 - code-block 公式 - formula 图片 - image 视频 - video 清除字体样式- clean 这一类的引用 直接['name','name']这种格式就好了
2. 需要有默认值的
标题 - header [{ 'header': 1 }, { 'header': 2 }] 值字体大小 列表 - list [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered,bullet 上标/下标 - script [{ 'script': 'sub'}, { 'script': 'super' }], 值sub,super 缩进 - indent [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1,+1等 文本方向 - direction [{'direction':'rtl'}]
结构
<template> <quill-editor class="editor" ref="myTextEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)"> </quill-editor> </template> <script> export default { data () { return { content: null, editorOption: { modules: { toolbar: [ ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 ["blockquote", "code-block"], // 引用 代码块 [{ header: 1 }, { header: 2 }], // 1、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"], // 清除文本格式 ["link", "image", "video"] // 链接、图片、视频 ], //工具菜单栏配置 }, placeholder: '请在这里添加产品描述', //提示 readyOnly: false, //是否只读 theme: 'snow', //主题 snow/bubble syntax: true, //语法检测 } } }, methods: { // 失去焦点 onEditorBlur(editor) {}, // 获得焦点 onEditorFocus(editor) {}, // 开始 onEditorReady(editor) {}, // 值发生变化 onEditorChange(editor) { this.content = editor.html; console.log(editor); }, }, computed: { editor() { return this.$refs.myTextEditor.quillEditor; } }, mounted() { // console.log('this i