tinymce 富文本编辑器上传二进制图片（如果使用base64在图片数量多的情况下，编辑会变得明显卡顿）

package.json 

{
  "private": true,
  "scripts": {
    "start": "roadhog server",
    "build": "npm run lint && roadhog build",
    "lint": "standard src/**/*.js && stylelint src/**/*.css",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@hanyk/rc-viewer": "0.0.3",
    "@tinymce/tinymce-react": "^3.5.0",
    "antd": "^3.26.16",
    "axios": "^0.19.2",
    "babel-polyfill": "6.26.0",
    "braft-editor": "^2.3.9",
    "crypto-js": "^4.0.0",
    "dva": "2.4.1",
    "dva-loading": "2.0.6",
    "echarts": "^4.9.0",
    "history": "4.7.2",
    "immutable": "^4.0.0-rc.12",
    "js-cookie": "2.2.0",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "qrcode": "^1.4.4",
    "qrcode-js": "0.0.2",
    "qrcode.react": "^1.0.0",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "tinymce": "^5.2.1"
  },
  "devDependencies": {
    "babel-plugin-dva-hmr": "0.3.2",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.9.1",
    "husky": "1.3.1",
    "image-process": "^4.0.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "react-app-rewired": "^2.1.5",
    "roadhog": "2.5.0-beta.4",
    "standard": "12.0.1",
    "stylelint": "9.10.1",
    "stylelint-config-standard": "18.2.0"
  },
  "standard": {
    "parser": "babel-eslint",
    "ignore": [
      "/dist"
    ]
  },
  "stylelint": {
    "extends": "stylelint-config-standard",
    "ignoreFiles": [
      "/dist",
      "**/*.js"
    ],
    "rules": {
      "selector-pseudo-class-no-unknown": [
        true,
        {
          "ignorePseudoClasses": [
            "global",
            "local"
          ]
        }
      ]
    }
  }
}

组件imports 

import { Editor } from '@tinymce/tinymce-react'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
// import lang from 'tinymce/plugins/zh_CN'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'

import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/image'
import 'tinymce/plugins/charmap'
import 'tinymce/icons/default'

 编辑器容器使用

<div style={{ height: '400px', overflow: 'auto' }}>
              <Editor
                init={{
                  setup: EditorView,
                  height: '100%',
                  language_url: process.env.BASE_URL + 'tinymce/langs/zh_CN.js',
                  language: 'zh_CN',
                  fontsize_formats: '8px 10px 12px 14px 16px 18px 24px 28px 32px 36px 42px',
                  font_formats: '微软雅黑;宋体;仿宋;黑体;楷体;隶书;幼圆;Arial=arial;sans=serif;Georgia=georgia;Symbol=symbol;Arial Black=arial black;Times New Roman=times new roman;',
                  plugins: 'lists,advlist,hr,image,charmap',
                  toolbar1: 'undo redo | formatselect fontselect fontsizeselect',
                  toolbar2: `bold italic underline strikethrough hr subscript superscript backcolor forecolor | alignleft aligncenter alignright alignjustify removeformat | bullist numlist outdent indent | image charmap`,
                  branding: false, // 是否禁用“Powered by TinyMCE”
                  menubar: false, // 顶部菜单栏显示
                  images_upload_handler: (blobInfo, success, failure) => {
                    console.log('blobInfo', blobInfo)
                    // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
                    // success(img)

                    // let formData;
                    // formData = new FormData();
                    // formData.append('file', blobInfo.blob());
                    this.props.dispatch({
                      type: '$/fetchArticleUploadFile',
                      payload: {
                        // file: formData,
                        file: blobInfo.blob()
                      },
                      onSuccess: (file) => {
                        console.log('file===>', file);
                        success(file.fileUrl + `&auth.token=${window.authToken}`)
                      },
                      onFailure: tips => {
                        message.error(tips)
                      }
                    })
                  }
                }}
                onEditorChange={e => { onChangeDrawer('content', e) }}
                value={content}
              />
            </div>