Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

#quillEditorId{.avatarUploader{显示：无；//隐藏上传的图片组件}}在Vue项目中使用富文本编辑器Vue-Quill-Editor（包括图片自定义上传服务、清除复制粘贴样式等）1、安装插件：npminstallvue-quill-editor（或者yarnaddvue-quill-editor)2.安装插件依赖：npminstallquill(oryarnaddquill)3.在main.js文件中引入：importVuefrom'vue'importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)newVue({VueQuillEditor,render:h=>h(App),}).$mount('#app')4.在vue页面中使用（代码完整，复制后即可使用）:#quillEditorId{.avatarUploader{显示：无；//隐藏上传的图片组件}}总结：1.变量toolbarOptions代表一个自定义工具栏，可以参考官网（官网写的比较简单）或者阅读本文中的代码（详细说明）；2、如果图片不做单独处理，直接将图片转成base64和DOM一起上传到服务；3.本文已自定义图片。选择本地图片时，会单独上传到服务中。返回地址后，将当前节点直接插入到富文本编辑器中可以看到代码中editorOption的handlers的image函数，在AvatarUpload之前插入富文本编辑器的当前光标函数。代码中有详细注释；4.粘贴板，可变剪贴板。如果需要清理复制的自包含样式，使用粘贴板清理，函数HandleCustomMatcher；5.关于复制粘贴的情况，再多说几句。在此过程中，编辑器已经将原始DOM转换为编辑器允许的DOM元素，所以这个不需要处理（处理起来会有点复杂）。