在TypeScript项目中使用TinyMCE时编辑器无法正常加载如何处理？

核心问题原因 #

• 仅导入了TinyMCE核心代码，未引入必要的主题、皮肤、插件资源：TinyMCE核心包默认不捆绑5.x版本默认主题silver、UI皮肤、功能插件等静态资源，缺失这些资源会导致编辑器框架无法正常渲染
• 初始化配置未匹配手动导入的资源规则：如果手动导入了皮肤、内容样式，未在配置中关闭自动拉取对应资源的逻辑，会触发资源路径匹配失败
• 导入路径不规范：直接写死node_modules相对路径导入，打包工具可能无法正确识别资源依赖
• 初始化时机错误：脚本执行时页面textarea元素还未挂载到DOM树，导致渲染逻辑中断

修复步骤 #

1. 修正导入逻辑，补全必要的资源导入

// 修正导入路径，不要写死node_modules相对路径，直接通过包名导入
import tinymce from 'tinymce/tinymce';
// 导入5.x默认主题
import 'tinymce/themes/silver/theme';
// 导入默认UI皮肤和内容样式
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/content/default/content.min.css';
// 按需导入需要用到的功能插件，示例为常用插件
import 'tinymce/plugins/advlist/plugin';
import 'tinymce/plugins/autolink/plugin';
import 'tinymce/plugins/lists/plugin';

2. 补充初始化配置，匹配手动导入的资源规则

export class Main{
    constructor() {
        tinymce.init({
            selector: 'textarea',
            // 声明使用的主题
            theme: 'silver',
            // 声明使用的插件，和上面导入的插件对应
            plugins: 'advlist autolink lists',
            // 关闭自动加载皮肤，因为已经手动导入
            skin: false,
            // 关闭自动加载内容样式，因为已经手动导入
            content_css: false
        });
    }
}

3. 调整初始化时机，确保DOM加载完成后再执行初始化

// 不要直接实例化，等待DOM加载完成后再执行
window.addEventListener('DOMContentLoaded', () => {
    let main = new Main();
});

如果使用Vite等打包工具，还需要配置静态资源拷贝插件，将node_modules/tinymce下的skins、themes目录拷贝到打包后的产物目录，避免部署后资源路径找不到。

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