tinymce-vue 复制粘粘图片自动上传

今天遇到了一个需求需要仿wx 公众号的富文本 其中一个功能就是需要粘粘上传
话不多说 直接上代码

第一步：引入 paste 插件

import 'tinymce/plugins/paste' 

第二步：配置上传方法

tinymce.init({
	paste_data_images: true,
    images_upload_handler: (blobInfo, success, failure, progress) => {
      const file = blobInfo.blob()
      upload(`${this.baseUrl}/uploadImageUrl`, file)
        .then((res) => {
          if (res.status == '200') {
            const file = 图片地址
            success(file)
            return
          } else {
            failure('上传失败')
          }
        })
        .catch((e) => {
          failure('上传出错')
        })
    }
})

第三步：在plugins中加入paste

到这里就可以粘粘图片上传啦！

后续遇到问题：
使用paste 复制字体样式被过滤问题
处理方法：添加paste 配置

tinymce.init({
   paste_webkit_styles:
     'color font-size font-family font-weight font-style',
   paste_retain_style_properties:
     'color font-size font-family font-weight font-style',
   valid_elements: '*[*]',
   extended_valid_elements: 'span[style],div[style],font[style|color]',
})