前情提要
编辑器安装及使用步骤, 官方文档写得十分清晰明了, 点击下方链接直接食用即可。
简单创建一个富文本编辑器的方法(官方文档)
这里只记录总结本人在配置编辑器的图片上传功能过程中, 遇到的一些问题和要点。
图片上传必要的配置
图片上传的相关配置是 editorConfig.MENU_CONF.uploadImage
, 思路是前台将图片上传到后台, 后台返回图片的服务器地址给前台。
一开始照搬官方文档的配置, 上传接口一直报错, 用 postman 确认接口没问题后, 删除了一些没必要的配置, 只留下面这些配置就成功上传了。
editorConfig: {
placeholder: '请输入内容...',
// 所有的菜单配置,都要在 MENU_CONF 属性下
MENU_CONF: {
uploadImage: {
// 图片文件上传接口地址
server: `${process.env.VUE_APP_BASE_API}/systemBulletin/uploadImg`,
timeout: 5 * 1000, // 5s
// fieldName 要与接口规定的Form Data文件字段名一致
fieldName: 'img',
maxFileSize: 10 * 1024 * 1024, // 10M
// 若接口返回的数据结构与官方规定的不一致, 则需要 customInsert 方法将返回的路径传给编辑器
customInsert(res, insertFn) {
const url = res.data
insertFn(url)
},
},
},
},
注:
返回的图片路径必须是绝对路径, 在上传成功后,可在地址栏中通过本地地址加上绝对路径测试是否能够访问到图片。(一般需要配置代理转发)
图片上传的一些事件回调函数
如果需要在上传时做一些额外操作, 则可能用到以下的方法, 写在 editorConfig.MENU_CONF.uploadImage
当中
onBeforeUpload(file) {
return file // will upload this file
// return false // prevent upload
},
onProgress(progress) {
console.log('onProgress', progress)
},
onSuccess(file, res) {
console.log('onSuccess', file, res)
},
onFailed(file, res) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file, err, res) {
alert(err.message)
console.error('onError', file, err, res)
},
使用过程中遇到的一些问题
1.编辑器内容初始化失败
在 onCreated
里调用 setHtml
初始化编辑器内容, 却失败了。
由于初始内容是需要调接口去后台拿的数据,很有可能组件渲染时,数据还没回来,这就造成传进组件里的数据为空,故无法初始化成功。
解决的思路是用 v-if
来确保当数据存在时再渲染组件。