基于Antd Table自定义通用columns列筛选配置

最近因为工作需要，用到了富文本编辑器让用户填写反馈，上传图片等功能，经过一些对比选择了tinymce,记录下图片相关问题。

完整版封装的组件代码，放到最后。

环境

• vue2.x
• tinymce 5.10.3
• tinymce-vue 2.1.0

这里由于开发环境是vue2,所以目前这个时间点，需要选择版本的去安装，引用官方文档的一句话

Version 4 of the tinymce-vue package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use tinymce-vue version 3.

图片上传

这个比较简单，在_init的配置中，配置images_upload_handler_

...
data () {init： {images_upload_handler：this.handleImageUpload}
},
methods: {handleImageUpload (blobInfo, success, failure) {// 将图片上传到服务器.let formdata = new FormData()formdata.append('file', blobInfo.blob(), blobInfo.filename())this.uploadImage(formdata).then(success).catch(failure)},uploadImage (formdata) {return new Promise((resolve, reject) => {Axios({url: 'https://xxxx.xx.com/xxx/xxx',method: 'post',data: formdata,headers: {'Content-Type': 'multipart/form-data'}}).then(result => {console.log(result)if (result.status !== 200 || result.data.code !== '200') {const msg = '上传失败'reject(msg)} else {resolve(result.data.data)}})})}
} 
1
2
3
4
5

图片粘贴

刚开始是想到的直接监听doc