好资源导航 » 文章资讯 » Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

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

2023-07-24 17:44:12 77

使用教程(注意细看总结部分，写了几点，希望有所帮助)：
1、安装插件：npminstallvue-quill-editor
2、安装插件依赖：npminstallquill
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{
display:none;//隐藏上传图片组件
}
}

总结：

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

到此这篇关于Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的文章就介绍到这了,更多相关vue富文本编辑器Vue-Quill-Editor内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐