如何在React中配置使用Tinymce 5.1.0版本？tinymce.init无效

@tinymce/tinymce-react 4.x版本本身兼容TinyMCE 5系列，你遇到的tinymce.init失效问题，大概率是没按React组件的正确方式配置、直接调用原生初始化方法导致的。下面是完整的配置步骤：

1. 安装指定版本依赖 #

先卸载已有的相关包，再安装目标版本：

npm uninstall @tinymce/tinymce-react tinymce
npm install @tinymce/tinymce-react@4.3.0 tinymce@5.1.0

2. 配置TinyMCE静态资源 #

TinyMCE需要加载皮肤、主题等静态文件，有两种可行方式：

方式一：本地资源引入 #

• 找到node_modules/tinymce目录，将skins、themes、plugins文件夹复制到React项目的public目录下（比如public/tinymce/）。
• 在组件中配置资源路径：

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

function MyEditor() {
  return (
    <Editor
      initialValue="<p>Hello World!</p>"
      init={{
        height: 500,
        skin_url: '/tinymce/skins/ui/oxide', // 对应public下的路径
        theme_url: '/tinymce/themes/silver/theme.js',
        plugins: 'advlist autolink lists link image charmap print preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
      }}
    />
  );
}

方式二：CDN加载 #

直接在public/index.html中引入TinyMCE 5.1.0的CDN资源，无需复制本地文件：

<script src="https://cdn.tiny.cloud/1/你的API_KEY/tinymce/5.1.0/tinymce.min.js" referrerpolicy="origin"></script>

注意：需要替换你的API_KEY为TinyMCE官网申请的免费密钥，否则会有功能限制。

3. 核心注意点：不要直接调用tinymce.init #

@tinymce/tinymce-react已经封装了Editor组件，所有配置都通过组件的init props传递，不需要手动调用原生的tinymce.init——这是你当前问题的核心原因。组件会自动处理初始化、销毁等生命周期逻辑。

4. 排查常见问题 #

启动React项目后，检查控制台：

• 若出现404错误，确认静态资源路径是否匹配；
• 若提示API_KEY错误，检查CDN链接中的密钥是否有效，或改用本地资源方式。

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