TinyMCE React自定义插件注册失败，多种尝试均无效求助

针对你遇到的「Failed to load plugin: dropdown-plugin」错误，核心原因是插件注册时机晚于Editor初始化，或插件文件未被TinyMCE正确识别。下面分场景给出具体修复方案：

一、修复内联插件注册问题 #

你当前在useLayoutEffect中注册插件，但@tinymce/tinymce-react的Editor组件初始化可能早于钩子执行，导致TinyMCE找不到已注册的插件，转而尝试从URL加载最终失败。

解决方法：提前插件注册时机 #

把插件注册代码移到组件模块的最外层，确保在Editor渲染前完成注册：

import { FC, RefObject, useRef } from 'react'
import { Editor } from '@tinymce/tinymce-react';
import tinymce, { Editor as TinyMCEEditor } from 'tinymce';
import './index.css'

// 直接在模块级别注册插件，确保Editor初始化前完成
tinymce.PluginManager.add("dropdown-plugin", function (editor) {
  editor.ui.registry.addButton("dropdown-plugin", {
    text: "dropdown-plugin button",
    onAction: () => {
      editor.setContent("<p>content added from dropdown-plugin</p>")
    }
  })
})

const TinymceEditor: FC = () => {
    const editorRef = useRef<TinyMCEEditor | null>(null);
    const log = () => {
        if (editorRef.current) {
            console.log(editorRef.current.getContent());
        }
    };

    return (
        <div className='tinymce_editor'>
            <Editor
                onInit={(evt, editor) => editorRef.current = editor}
                init={{
                    height: 500,
                    plugins:['dropdown-plugin'],
                    toolbar:'dropdown-plugin'
                }}
            />
            <button onClick={log}>Log editor content</button>
        </div>
    )
}

export default TinymceEditor;

如果不想在模块级别注册，也可以用状态控制Editor的渲染时机，确保插件注册完成后再初始化：

import { useState, useEffect } from 'react';

const TinymceEditor: FC = () => {
    const editorRef = useRef<TinyMCEEditor | null>(null);
    const [pluginReady, setPluginReady] = useState(false);

    useEffect(() => {
        tinymce.PluginManager.add("dropdown-plugin", function (editor) {
          editor.ui.registry.addButton("dropdown-plugin", {
            text: "dropdown-plugin button",
            onAction: () => {
              editor.setContent("<p>content added from dropdown-plugin</p>")
            }
          })
        });
        setPluginReady(true);
    }, []);

    // 插件未注册完成时不渲染Editor
    if (!pluginReady) return null;

    return (
        {/* 原Editor渲染代码 */}
    )
}

二、修复Yeoman生成插件的加载问题 #

不管是构建后引用还是直接引用，核心是让TinyMCE能正确定位到插件文件：

1. 构建后引用插件 #

• 先确保Yeoman生成的插件已执行npm run build完成构建，得到dist/dropdown-plugin/plugin.min.js文件。

• 两种引用方式：
  方式一：直接导入
  在组件顶部导入插件文件，Webpack会自动处理打包：

  import '../../plugins/dropdown-plugin/dist/dropdown-plugin/plugin.min.js';
  
  // Editor配置不变
  init={{
    plugins: ['dropdown-plugin'],
    toolbar: 'dropdown-plugin'
  }}
  

  方式二：用external_plugins指定路径
  如果直接导入出现打包问题，可将插件文件放到项目静态资源目录（如public/static/plugins），然后通过绝对路径配置：

  init={{
    external_plugins: {
      'dropdown-plugin': '/static/plugins/dropdown-plugin/plugin.min.js'
    },
    toolbar: 'dropdown-plugin'
  }}
  

2. 直接引用未构建的插件 #

不推荐这种方式，未构建的源码可能存在语法或依赖问题。如果必须使用，需确保插件代码符合TinyMCE插件规范，且通过external_plugins指定源码文件的绝对路径。

额外注意事项 #

• 确保@tinymce/tinymce-react与tinymce版本兼容，版本不匹配也会导致插件加载失败。
• 检查浏览器控制台的网络请求，若存在插件文件404，说明路径配置错误，需调整路径。

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