React中TinyMCE自定义插件报错：'tinymce'未定义

问题原因 #

你遇到的ESLint错误是因为静态检查工具无法识别全局的tinymce变量——虽然运行时TinyMCE会把这个变量挂载到window对象上，但ESLint的静态分析不知道它的存在，因此抛出no-undef错误。

解决方案 #

方案1：使用组件内的编辑器实例（推荐）

你已经通过onInit将编辑器实例存入了editorRef，完全可以用这个局部实例替代全局的tinymce.activeEditor，这样既符合React的组件模式，又能彻底解决ESLint错误。

首先确保你在组件内正确声明了editorRef：

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

const YourComponent = () => {
  const editorRef = useRef(null);
  // ...其他组件逻辑
};

然后修改file_picker_callback中的对应代码：
把原来的：

var blobCache = tinymce.activeEditor.editorUpload.blobCache;

替换为：

var blobCache = editorRef.current.editorUpload.blobCache;

修改后的完整file_picker_callback代码：

file_picker_callback: function (cb, value, meta) {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.onchange = function () {
    var file = this.files[0];

    var reader = new FileReader();
    reader.onload = function () {
      var id = 'blobid' + (new Date()).getTime();
      // 改用editorRef中的实例
      var blobCache = editorRef.current.editorUpload.blobCache;
      var base64 = reader.result.split(',')[1];
      var blobInfo = blobCache.create(id, file, base64);
      blobCache.add(blobInfo);
      cb(blobInfo.blobUri(), { title: file.name });
    };
    reader.readAsDataURL(file);
  };

  input.click();
},

方案2：告知ESLinttinymce是全局变量

如果不想调整代码逻辑，可以通过以下方式让ESLint识别这个全局变量：

• 单文件临时解决：在组件文件顶部添加注释：

  /* global tinymce */
  

• 全局配置解决：在项目的ESLint配置文件（如.eslintrc.js）中添加全局变量声明：

  module.exports = {
    // ...其他配置
    globals: {
      tinymce: 'readonly'
    }
  };
  

内容的提问来源于stack exchange，提问作者user16473756