最近项目里需要用到富文本编辑器,同事选择里百度出的ueditor,但是里面自带的图片上传功能需要后台配合,配置成服务器地址,和我们实际情况不是太符合,于是另想办法,搞定图片上传。
重写配置项
首先重写里toolbars配置。最重要的是要把原先的上传图片功能按钮去掉,下面是我用到的配置项
1 | toolbars: [ |
更多配置可参考官网
添加初始化方法
初始化ueditor的时候触发一个方法,因为我的项目是用vue写的,而且封装了一层ueditor,所以就对外暴露了一个beforeInit方法。
1 | <fw-ueditor-wrap |
1 | // 添加自定义弹窗 |
其实就是在toolbar工具栏后面又加了一个自定义的按钮,实现上传功能。
element弹窗设置
弹窗我用的是element的弹窗,使用方式参考element官网弹窗。并且使用了element的upload上传组件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<el-dialog
title="上传图片"
v-if="dialogVisible"
:visible.sync="dialogVisible"
width="30%"
>
<el-upload
class="upload-demo"
drag
accept=".png, .jpg"
:headers="headers"
:action="uploadAddr"
:beforeUpload="beforeAvatarUpload"
:on-success="uploadImageSuccess"
:on-error="uploadImageError"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件,且不超过5M
</div>
</el-upload>
</el-dialog>
关键的就是上传成功后需要触发uploadFile方法,将上传成功的图片插入到富文本编辑器中
1 | uploadFile(file) { |
大功告成,搞定!