富文本wangeditor图片自定义上传及图片删除

59 阅读 0 评论 39 点赞

我是靠谱客的博主欣喜皮卡丘，最近开发中收集的这篇文章主要介绍富文本wangeditor图片自定义上传及图片删除，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

富文本编辑器的组件有很多像：百度的UEditor ，Vue-Quill-Editor，以及wangeditor。
组件的选择根据自己业务需求选择，本文选用的是wangeditor。
首先说一下业务需求：
表单里加富文本，要求能够加载图片，文字进行保存，编辑时能够从数据库读取数据进行回显。
主要问题：
1.图片上传
wangeditor可以取到文本域中的html代码，准备以字符串形式存入数据库。
但对图图片处理默认为base64格式文件，数据库直接保存文本域中的heml字符串太长，很难保存。所以图片进入文本域中先上传到服务器中返回文件地址放回文本域中。幸运的是，wangeditor支持这种文件上传配置如下：具体可看官方api

var editor = new window.wangEditor(’#div1’)
// 配置服务器端地址
editor.customConfig.uploadImgServer = ‘/upload’
注意：返回数据必须为数组形式，否则组件回报错误取不到返回数据

wangeditor可以支持自定义上传设置，配置如下：

组件图片上传回调方法
editor.customConfig.customUploadImg =function(files, insert){
//回显插入方法
insert（html）
}

editor.customConfig.customUploadImg = async function (files, insert) {
let form = new FormData()
for (let i = 0; i < files.length; i++) {
form.append('file', files[i])
}
form.append('token', getToken())
form.append('x-uid', this.$store.getters.user.id)
let imgUrls = await this.download('/router/upload', form)
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法
// 上传代码返回结果之后，将图片插入到编辑器中
for (let q = 0; q < imgUrls.length; q++) {
insert(imgUrls[q].url)
}
this.imgsrc = this.getSrc(editor.txt.html())
}
/**
* 图片上传方法
* @param {String} url 上传地址url
*
{Object}
formdata 文件数据
*/
download (url, formdata) {
let pro = new Promise((resolve) => {
let xhr = new XMLHttpRequest()
xhr.open('POST', url)
xhr.onload = function (result) {
result = xhr.responseText
try {
result = JSON.parse(result)
} catch (ex) {
console.error(ex)
}
resolve(result.data)
}
xhr.onerror = function () {
console.error('could not download file')
}
xhr.send(formdata)
})
return pro
},

2.图片服务器删除
上传搞定了，但是每次删除图片只是在页面中删除了标签而已，对于上传服务器中的图片文件没有操作，表面看不出问题，但会导致服务器文件越来越多。所以要在页面删除中增加服务器删除操作。
主要思路：
监听文本域内容变化，比较前后字符串的img标签中的src，取出差异项，用src地址进行服务器删除文件操作。


/**
* 文本域内容发生变化
*/
editor.customConfig.onchange = function (html) {
this.onchange(html)
}.bind(this)
/**
* 文本域发生变化
*/
onchange (html) {
// html 即变化之后的内容
if (this.imgsrc.length !== 0) {
let nowimgs = this.getSrc(html)
let merge = this.imgsrc.concat(nowimgs).filter(function (v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v)
})
for (let x in merge) {
let colds = merge[x].split('/')
this.deleteImage(colds) //服务器删除文件
}
this.imgsrc = nowimgs
}
},
/**
* 取出区域内所有img的src
*/
getSrc (html) {
var imgReg = /<img.*?(?:>|/>)/gi
// 匹配src属性
var srcReg = /src=[\"]?([^\"]*)[\"]?/i
var arr = html.match(imgReg)
let imgs = []
if (arr) {
for (let i = 0; i < arr.length; i++) {
var src = arr[i].match(srcReg)[1]
imgs.push(src)
}
}
return imgs
},