阅读目录
main.js中引入
使用
更换quill-editor的点击事件为自定义事件
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 -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的配置
- 只需要填写功能名的
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接[‘name’,‘name’]这种格式就好了 - 需要有默认值的
标题 - 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’}]实现以上配置后就可以看到效果如图：
以上就是vue-quill-editor的基本配置了。
图片上传的配置
因为图片这块，大多情况下，我们都不需要base64格式的，所以我们需要将图片通过OSS换取网络路径然后发送给后端和回显。
回到顶部
更换quill-editor的点击事件为自定义事件
这里借助element-ui的图片功能，因为其功能齐全，图片上传前，上传后，都有交互效果的处理，所以可以选择性使用
editorOption: {
modules: {
toolbar: {
handlers: {
image: function(value) {
if (value) {
// 触发input框选择图片文件
document.querySelector(".avatar-uploader input").click();//自定义元素的点击事件
} else {
this.quill.format(“image”, false);
}
},
// link: function(value) {
// if (value) {
// var href = prompt(‘请输入url’);
// this.quill.format(“link”, href);
// } else {
// this.quill.format(“link”, false);
// }
// },
}
}
}
},
而后在自定义的元素上写入点击事件，然后将该元素隐藏掉。点击quill-editor的图片上传时，实际点击了自定义的图片上传，而后在返回网络路径后将图片插入富文本编辑器即可。
插入返回的网络图片路径(这里借助的是element-ui)
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.message.error(“图片插入失败”);
}
// loading动画消失
this.quillUpdateImg = false;
},
以上就是主要思路及代码，如果还是不懂就看下面vue组件的源码（也可直接使用，前提是下载了element-ui）
组件封装源码及引用
<quill-editor
class="editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
import { quillEditor } from “vue-quill-editor”;
import “quill/dist/quill.core.css”;
import “quill/dist/quill.snow.css”;
import “quill/dist/quill.bubble.css”;export default {
props: {
/编辑器的内容/
value: {
type: String
},
/图片大小/
maxSize: {
type: Number,
default: 4000 //kb
}
},components: {
quillEditor
},
data() {
return {
content: this.value,
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
editorOption: {
theme: "snow", // or 'bubble'
placeholder: "您想说点什么？",
modules: {
toolbar: {
container: toolbarOptions,
// container: "#toolbar",
handlers: {
image: function(value) {
if (value) {
// 触发input框选择图片文件
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
// link: function(value) {
// if (value) {
// var href = prompt('请输入url');
// this.quill.format("link", href);
// } else {
// this.quill.format("link", false);
// }
// },
}
}
}
},
serverUrl: "https://testihospitalapi.ebaiyihui.com/oss/api/file/store/v1/saveFile", // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
} // 有的图片服务器要求请求头需要有token
};
},
methods: {
onEditorBlur() {
//失去焦点事件
},
onEditorFocus() {
//获得焦点事件
},
onEditorChange() {
//内容改变事件
this.$emit("input", this.content);
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true;
},
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code == 200) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", res.result.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error("图片插入失败");
}
}引入：
还有一种方式是不借助element-ui来实现图片上传，这一过程无非就是图片上传OSS换取网络路径，这一块，咱们其实可以自定义图片上传组件。这里就不做阐述了，笔者的另一篇图片上传的组件文章()，大家在这里就可以使用起来。在这里插入代码片
