Vue如何使用富文本编辑器Vue-Quill-Editor

这篇文章主要为大家展示了Vue如何使用富文本编辑器Vue-Quill-Editor，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事成都网站建设、成都网站设计、企业网站建设、手机网站制作、网页设计、成都品牌网站建设、网页制作、做网站、建网站。创新互联拥有实力坚强的技术研发团队及素养的视觉设计专才。

使用教程(注意细看总结部分，写了几点，希望有所帮助)：
1、安装插件：npm install vue-quill-editor
2、安装插件依赖：npm install quill
3、main.js文件中引入：

import Vue from 'vue'
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)
new Vue({
 VueQuillEditor,
 render: h => h(App),
}).$mount('#app')

4、vue页面中使用(代码完整，复制就能使用)：

总结：

1、变量toolbarOptions表示自定义的工具栏，可以参照官网(官网写的比较简单)或者细看本文代码(有详细注释)；
2、如果不单独处理图片，图片会被直接转义成base64，跟随DOM一块儿上传服务；
3、本文对图片做了自定义处理，选择本地图片时，会单独上传到服务，返回地址后，直接插入到富文本编辑中的当前节点。看代码中editorOption的handlers的image函数，以及插入富文本编辑器当前光标函数beforeAvatarUpload，代码中有详细注释；
4、粘贴板，变量clipboard。如果需要清理复制的自带样式，使用粘贴板进行清理，函数HandleCustomMatcher；
5、对于复制粘贴的情况，多说一句。过程中，编辑器已经将原有的DOM转为编辑器允许存在的DOM元素，所以这块儿不用再处理(处理起来，也会有点复杂)。

以上就是关于Vue如何使用富文本编辑器Vue-Quill-Editor的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。