vue-quill-editor自定义图片上传

oneasp 发布于2019-08-20 17:26 / 3136人阅读

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。

我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。
我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默认的图片上传是使用Data URL方式保存到了内容里，这不是我想要的，我相信大部分人也不想这样去保存图片，还好quill提供了如何去自定义按钮事件的demo(03-example.vue)，那么我们就可以自己去实现图片的保存方式了。

先看看效果，可以支持直接上传文件和裁切图片

工具栏处理

先创建一个组件Editor.vue,引入vue-quill-editor,我们要做的就是重新定义它的操作按钮，也就是使用slot="toolbar"这个插槽，先贴出quill案例的关键代码

我们可以看到插槽内我们放了两个按钮分别是加粗和倾斜，quill会根据这些按钮的class属性绑定样式和操作，也就是说如果我们不用它的样式，自己写样式，自己绑定事件，就可以去处理自己的逻辑了，那我们要保留quill之前的所有功能只修改图片上传应该如何配置呢？原有的布局样式都保留，只去掉图片样式并多带带加事件

逻辑处理

布局完成了，接下来就是逻辑处理了，我们使用cli构建项目，创建两个vue文件

Quilleditor.vue是我们对vue-quill-editor的封装
CropUpload.vue是我们对vue-image-crop-upload的封装

具体代码请访问https://github.com/lihualong/...

总结

我们是在quill的基础上再封装了一个插件，基本的配置按照quill就好了

定义props让父组件传值，图片上传的url和file控件的name名称

处理图片点击的逻辑imgClick方法，判断图片是否裁切，选择不同的处理方式，

图片处理成功后，并把结果插入quill编辑器，

我们在父组件调用时都会采用v-model双向绑定，当父组件绑定值时我们使用watch给quill赋值，quill编辑后调用onchange 事件使用this.$emit("input", this.content)给父组件传值

至此我们的自定义Editor就完成了，跟多的细致的处理就由您发挥了。

专线服务混合云自定义图片自定义图片伸缩自定义头像自定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83581.html

vue-quill-editor自定义图片上传

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...

superw 2019-08-05 17:54 评论0 收藏0
vue-quill-editor自定义图片上传

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...

miracledan 2019-08-01 17:01 评论0 收藏0
改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器

摘要：原生上传图片到服务器上次给大家分享过下面的文章结合上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。原生上传图片到服务器上次给大家分享过下面的文章结合element-ui上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。无需引入element-ui，并且增加了部分功能：可限制图片...

xushaojieaaa 2019-08-21 18:37 评论0 收藏0
# quill-image-extend-module ：实现vue-quill-editor图片上

摘要：的增强模块，功能提供图片上传到服务器的功能复制插入拖拽插入显示上传进度显示上传成功或者失败支持与其他模块一起使用例如调整图片大小富文本框参数设置的所有可配置项可选参数是否显示上传进 quill-image-extend-module vue-quill-editor的增强模块，功能：提供图片上传到服务器的功能复制插入拖拽插入显示上传进度显示上传成功或者失败支持与其他模块...

big_cat 2019-08-22 14:01 评论0 收藏0
vue-quill-editor富文本编辑器

摘要：富文本编辑器自定义组件加粗斜体下划线删除线引用代码标题标题有序列表无序列表下标上标减少缩进增加缩进输入方向字体大小段落格式字体颜色背景色字体对齐 vue-quill-editor 富文本编辑器自定义组件 ...

qujian 2019-08-22 13:57 评论0 收藏0