React中使用tinymce 3.13.0 实现本地图片上传/图片粘贴

Situation

React项目中引入了tinyMCE富文本组件，需要增加图片粘贴功能

Task

需要在已有组件功能上增加本地图片上传/图片粘贴功能，并上传至服务器获取图片远程地址替换掉富文本中base64图片格式，将富文本内容存在数据库并能实现数据回显

Action

• 使用tinymce组件自带images_upload_handler属性，设置回调为图片上传处理方法
• plugins中添加image
• paste_data_images设置为true，组件默认为false

// 上传逻辑
  const ImagesUploadHandler = async (blobInfo: any, succFun: any, failFun: any) => {
    let formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    // 上传图片获取远程地址
    uploadImgToServer(formData, (res: any) => {
    //调用回调并替换掉富文本内容的base64格式图片为返回的URL
      isResponseValid(res) ? succFun(res.data) : ''
    }, (err: any) => {
      console.error(err);
    })
  }



<Editor
          init={{
            height: "100%",
            menubar: false,
            toolbar_mode: "sliding",
            forced_root_block: false,
            branding: false,
            resize: false,
            browser_spellcheck: true,
            plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table paste code help",
              "image"//插件中添加 image
            ],
            contextmenu: "link useBrowserSpellcheck image table",

            init_instance_callback: InitInstanceCallback,
            paste_data_images: true,
            // 图片上传回调
            images_upload_handler: ImagesUploadHandler,
            convert_urls: false,

          }}
        />

请求函数如下：

import axios from 'axios';

export const uploadImgToServer = (file: any, succCallBack: Function, failCallBack: Function) => {
    axios.post(`【上传服务器地址】`, file, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
    }).then(response => {
        succCallBack(response?.data)
        return response.data
    }).catch(error => {
        failCallBack(error);
    });
}

Result

效果如图所示，图片img标签中的src替换为图片远程地址

参考文档

官网英文文档 www.tiny.cloud/docs/tinymc…

官网中文文档 tinymce.ax-z.cn/general/bas…

juejin.cn/post/698739…

juejin.cn/post/714838…