Vue-Quill-Editor
主流富文本编辑器对比
前言：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 -smain.js中引入
import Quill from \'quill\' import VueQuillEditor from \'vue-quill-editor\' import { container, ImageExtend, QuillWatch } from \'quill-image-extend-module\' import ImageResize from \'quill-image-resize-module\' // 图片缩放组件。 import { ImageDrop } from \'quill-image-drop-module\'; // 图片拖动组件。 Quill.register(\'modules/ImageExtend\', ImageExtend) Quill.register(\'modules/imageResize\', ImageResize) Quill.register(\'modules/imageDrop\', ImageDrop); 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>
<div class="edit_wrap">
<quill-editor v-model="content" ref="quillEditor" :options="editorOption" @blur="onBlur($event)"
@focus="onFocus($event)" @change="onChange($event)">
</quill-editor>
<el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false"
:on-change=\'changeUpload\'>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击上传</div>
<div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div>
</el-upload>
<button v-on:click="save">保存</button>
</div>
</template>
<script>
export default {
name: \'\',
data() {
return {
content:\'请输入编辑内容\',
editorOption: {
modules: {
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: \'black\',
border: \'none\',
color: \'white\'
},
modules: [\'Resize\', \'DisplaySize\', \'Toolbar\']
},
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\'], //清除字体样式
[\'image\', \'video\'] //上传图片、上传视频
],
},
theme: \'snow\',
}
}
},
props: {
},
components:{
},
mounted() {
},
computed: {
editor() {
return this.$refs.quillEditor.quill;
},
},
methods:{
changeUpload() {},
onBlur() {}, // 失去焦点事件
onFocus() {}, // 获得焦点事件
onChange() {}, // 内容改变事件
save(event) {
alert(this.content);
},
}
}
</script>
<style scoped>
</style>
汉化
汉化只需要更改toolbar工具栏中的样式即可实现
<style> .editor { line-height: normal !important; height: 800px; } .ql-snow .ql-tooltip[data-mode=link]::before { content: "请输入链接地址:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: \'保存\'; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode=video]::before { content: "请输入视频地址:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: \'14px\'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: \'10px\'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: \'18px\'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: \'32px\'; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: \'文本\'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: \'标题1\'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: \'标题2\'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: \'标题3\'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: \'标题4\'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: \'标题5\'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: \'标题6\'; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: \'标准字体\'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { content: \'衬线字体\'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { content: \'等宽字体\'; } </style>
实现以上配置后就可以看到效果如图：
以上就是vue-quill-editor的基本配置了。
本文参考：https://www.cnblogs.com/wjlbk/p/12884661.html
备注：再引入的过程中会出现引入报错的问题 报错的主要是依赖的问题，修改vue.config.js文件的 configureWebpack 模块；这个副文本编辑器还是比较简单对于简单需求可以考虑使用；
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】
filename: `js/[name].[hash:6].vw.js`,
chunkFilename: `js/[name].[hash:6].vw.js`
// chunkFilename: `js/[id].vw.js`
},
plugins: [
new webpack.ProvidePlugin({
\'window.Quill\': \'quill/dist/quill.js\',
\'Quill\': \'quill/dist/quill.js\'
})
]
},