Vue集成TinyMCE外部插件报错：tinymce.get()[0]未定义

1. 解决ESLint no-undef 错误（无需修改第三方插件） #

在项目的ESLint配置文件（如.eslintrc.js或.eslintrc.json）中全局声明tinymce变量，无需改动第三方插件代码：

module.exports = {
  // ...其他配置项
  globals: {
    tinymce: true
  }
}

2. 修复插件初始化时机问题 #

核心问题是Flmngr插件在TinyMCE实例尚未创建完成时就调用了tinymce.get()，导致找不到实例。可通过以下方式调整：

方式一：用TinyMCE的setup回调延迟插件逻辑 #

在TinyMCE的init配置中添加setup函数，确保编辑器实例就绪后再处理插件相关逻辑：

data: function() {
  return {
    init: {
      inline: true,
      // ...其他配置
      external_plugins: {
        'file-manager': '/js/file-manager/plugin.js' 
      },
      Flmngr: { 
        apiKey: 'FLMNFLMN',
        urlFileManager: 'https://fm.flmngr.com/fileManager',
        urlFiles: 'https://fm.flmngr.com/files'
      },
      setup: (editor) => {
        editor.on('init', () => {
          // 编辑器就绪后，tinymce.get(editor.id)已存在，插件可正常获取实例
        });
      }
    }
  }
}

方式二：调整插件引入方式，避免提前加载 #

移除组件中直接import '@/js/file-manager/plugin.js'的代码，完全依赖external_plugins配置让TinyMCE自动加载插件。TinyMCE会在自身初始化完成后才加载并初始化外部插件，保证插件执行时tinymce实例已存在。

方式三：验证插件路径正确性 #

检查external_plugins中的file-manager路径是否正确，确保插件文件能被正确加载。如果是本地插件，使用相对项目根目录的正确路径，或通过Vue静态资源规则处理。

额外注意事项 #

• 确保TinyMCE的Vue组件Editor已正确挂载，避免组件未挂载时初始化编辑器。
• 若使用inline模式，确保目标容器（#article）在初始化时已存在于DOM中。

内容的提问来源于stack exchange，提问作者Frédéric RIBADEAU DUMAS