Strapi v4替换默认WYSIWYG为TinyMCE 常规启动编辑器不显示

strapi develop/strapi start模式下TinyMCE不渲染、加--watch-admin参数就正常，核心原因有两个：

• Strapi admin面板构建逻辑存在差异：带--watch-admin启动时走开发态热更新流程，会递归扫描所有插件目录下的前端依赖完成打包；不带watch参数启动、以及strapi start生产模式启动时，只会执行一次admin构建，默认不会主动扫描src/plugins子目录下的第三方前端依赖，@tinymce/tinymce-react如果只装在插件私有目录下，构建时不会被打进最终的admin资源包，运行时找不到组件自然渲染失败。
• TinyMCE组件代码存在隐性bug：代码里在onInit回调中给editorRef.current赋值，但没有提前声明editorRef这个ref对象，运行时会抛JS错误阻断组件渲染。

1. 补全TinyMCE组件缺失的ref声明 #

修改src/plugins/wysiwyg/admin/src/components/Tinymce/index.js，在文件开头补全editorRef的定义，修正后的核心代码如下：

import React, {useRef} from 'react';
import {Editor} from '@tinymce/tinymce-react';
import PropTypes from 'prop-types';

const TinyEditor = ({onChange, name, value, disabled}) => {
  const onChangeRef = useRef(onChange);
  // 补上缺失的editorRef声明
  const editorRef = useRef(null);

  function onBlur(ev, editor) {
    const content = editor.getContent();
    onChangeRef.current({target: {name, value: content, type: 'wysiwyg'}});
  }

  return (
    <>
      <Editor
        apiKey="替换为你自己的Tiny Cloud真实API Key"
        disabled={disabled}
        onInit={(evt, editor) => editorRef.current = editor}
        onBlur={onBlur}
        initialValue={value}
        init={{
          selector: 'textarea',
          height: 400,
          menubar: false,
          plugins: ['lists'],
          toolbar: 'undo redo',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />
    </>
  );
}

// 其余原有propTypes、defaultProps、导出逻辑保持不变

2. 将TinyMCE依赖安装到项目根目录 #

执行以下命令，把@tinymce/tinymce-react安装到项目根目录的依赖列表中，确保Strapi构建admin时能检索到该依赖：

# npm用户执行
npm install @tinymce/tinymce-react --save

# yarn用户执行
yarn add @tinymce/tinymce-react

3. 清理旧构建缓存并重新编译admin #

旧的构建缓存会导致新依赖无法被正确打包，必须先清理缓存再重新构建：

# 删除旧的构建产物、缓存目录
rm -rf build .cache dist

# 重新构建admin面板
npm run build

# 构建完成后正常启动项目即可
npm run develop
# 生产环境启动执行 npm run start

4. （兜底方案）配置插件webpack别名 #

如果完成上述步骤后仍存在加载问题，新增webpack配置明确告知Strapi构建时的依赖检索路径：
新建文件src/plugins/wysiwyg/admin/webpack.config.js，写入以下内容：

module.exports = (config, webpack) => {
  config.resolve.alias['@tinymce/tinymce-react'] = require.resolve('@tinymce/tinymce-react');
  return config;
};

保存后重复步骤3的清缓存、重新build操作即可。

不带--watch-admin参数执行npm run develop启动项目，打开内容类型的富文本字段编辑页，TinyMCE工具栏正常显示、可正常编辑内容、媒体库插入功能可用，即修复完成。

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