Angular15+Storybook：如何加载本地node_modules中的TinyMCE资源？

问题根源在于：Angular CLI的angular.json资源配置只对项目本身的构建生效，Storybook有独立的构建和资源加载机制，不会读取这个配置，所以得单独给Storybook做静态资源映射，同时调整TinyMCE的初始化配置。

解决方案步骤： #

1. 配置Storybook静态资源映射
   修改.storybook/main.js文件，添加staticDirs配置，把本地的tinymce资源映射到Storybook服务的/tinymce路径下，和你Angular项目里的输出路径保持一致：

   module.exports = {
     // 其他已有配置...
     staticDirs: [
       {
         from: '../node_modules/tinymce',
         to: '/tinymce'
       }
     ],
   };
   

2. 强制TinyMCE Angular组件使用本地脚本
   在Storybook的moduleMetadata的imports里，修改EditorModule的导入方式，明确指定本地脚本路径，避免组件默认触发CDN fallback：

   EditorModule.forRoot({
     tinymceScriptSrc: '/tinymce/tinymce.min.js'
   })
   

   替换你原来直接导入EditorModule的代码即可。

3. 验证TinyMCE初始化配置
   你组件里的settings配置已经设置了base_url: '/tinymce'和suffix: '.min'，这个是正确的，确保插件、皮肤等资源能从本地路径加载，不需要修改。

可选优化：直接导入TinyMCE资源到Storybook Bundle #

如果不想配置静态资源映射，也可以在.storybook/preview.js里直接导入tinymce的脚本和样式，把它们打包进Storybook的bundle中：

// 导入核心脚本
import 'tinymce/tinymce.min.js';
// 按需导入你用到的插件
import 'tinymce/plugins/advlist/plugin.min.js';
import 'tinymce/plugins/autolink/plugin.min.js';
import 'tinymce/plugins/lists/plugin.min.js';
// 其他你用到的插件...
// 导入皮肤和内容样式
import 'tinymce/skins/ui/oxide-dark/skin.min.css';
import 'tinymce/skins/content/dark/content.min.css';

这种方式不需要依赖静态资源路径，更简洁，适合Storybook场景。

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