自定义图片上传按钮之前先把ueditor.config.js中的图片上传删除
使用beforeInit添加自定义按钮
<vue-ueditor-wrap ref="ueditor" v-model="postForm.content" :config="myConfig" @beforeInit="addCustomButtom" />
这边直接使用的ueditor自带的图标，直接在network中下载查看，改变背景位置即可
/**
* @description: 上传图片
* @param {*}
* @return {*}
*/
addCustomButtom() {
const that = this
window.UE.registerUI(
'uploadImg',
function(editor, uiName) {
// 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
editor.execCommand('inserthtml', ``)
}
})
// 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
var btn = new window.UE.ui.Button({
name: 'uploadImg',
title: '上传图片',
cssRules: `background-position: -380px 0px;`,
onclick: function() {
// 渲染dialog
that.dialogVisible = true
editor.execCommand(uiName)
}
})
return btn
},
100 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */
)
},
弹框上传
这边直接使用element的弹框
<el-dialog title="上传图片" :visible.sync="dialogVisible" :modal="false">
<el-upload
class="upload-demo"
drag
accept=".png, .jpg"
:headers="header"
:action="uploadUrl"
:before-upload="beforeAvatarUpload"
:on-success="uploadImageSuccess"
:on-error="uploadImageError"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过5M
</div>
</el-upload>
</el-dialog>
/**
* @description: 上传图片
* @param {*}
* @return {*}
*/
// eslint-disable-next-line no-unused-vars
uploadImageSuccess(response, file, fileList) {
if (response) {
this.$message({
message: '上传成功',
type: 'success'
})
const fileObj = {
url: response.data.url
}
this.uploadFile(fileObj)
} else {
this.$message({
message: '上传失败',
type: 'warning'
})
}
},
/**
* @description: 将图片插入到富文本中
* @param {*} file
* @return {*}
*/
uploadFile(file) {
// 关键
const editor = document.querySelector('.edui-default').getAttribute('id')
window.UE.getEditor(editor).execCommand('insertimage', {
src: file.url
// width: '100',
// height: '100',
})
this.dialogVisible = false
},
搞定
