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

缺乏、安全感 2022-03-22 02:25 1191阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 2][]

## 工具栏处理 ##

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

<quill-editor v-model="content"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)">
             <div id="toolbar" slot="toolbar">
               <button class="ql-bold">Bold</button>
               <button class="ql-italic">Italic</button>
             </div>
    </quill-editor>

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

## 逻辑处理 ##

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

![20190125142427133.png][]  
Quilleditor.vue是我们对vue-quill-editor的封装  
CropUpload.vue是我们对vue-image-crop-upload的封装

具体代码请访问[https://github.com/lihualong/...][https_github.com_lihualong_...]

## 总结 ##

1.  我们是在quill的基础上再封装了一个插件，基本的配置按照quill就好了
2.  定义props让父组件传值，图片上传的url和file控件的name名称
3.  处理图片点击的逻辑imgClick方法，判断图片是否裁切，选择不同的处理方式，
4.  图片处理成功后，并把结果插入quill编辑器，
5.  我们在父组件调用时都会采用v-model双向绑定，当父组件绑定值时我们使用watch给quill赋值，quill编辑后调用onchange 事件使用this.$emit('input', this.content)给父组件传值

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70]: /images/20220322/cec7952c147147579f46a52313406220.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 1]: /images/20220322/3cdc75d7de60424ea59b7e2224c85e86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 2]: /images/20220322/03a3f957e89a48938f5be8946ded7e8c.png
[20190125142427133.png]: /images/20220322/4a4a90982f4b4cf5a62e0eebb5478719.png
[https_github.com_lihualong_...]: https://github.com/lihualong/quilleditor