Angular 14本地部署TinyMCE 5无法加载本地化语言文件求助

核心原因 #

Angular编译后仅会将public目录（或angular.json中配置的assets目录）下的静态资源打包到dist文件夹，TinyMCE无法直接访问src目录下的文件；同时错误的路径配置或资源目录未被正确识别，会导致语言文件找不到。

具体解决步骤 #

1. 正确放置语言文件

   • 下载与TinyMCE 5版本完全匹配的荷兰语（nl）语言包文件nl.js
   • 在Angular项目根目录的public文件夹内创建tinymce/langs子目录，将nl.js放入其中，最终路径为：public/tinymce/langs/nl.js

2. 验证静态资源可访问性

   • 启动Angular开发服务器：ng serve
   • 在浏览器地址栏输入http://localhost:4200/tinymce/langs/nl.js，确认能正常加载该JS文件。若加载失败，检查文件路径是否有误。

3. 修正编辑器初始化配置

   • 移除无效的language_load配置，保留并修正核心本地化配置：

     init: EditorComponent['init'] = {
         language: 'nl',
         language_url: '/tinymce/langs/nl.js'
     }
     

4. 正确配置base_url（若需本地托管完整TinyMCE核心）

   • 若你将TinyMCE核心文件（tinymce.min.js、skins目录等）也放在public/tinymce下，可安全设置base_url，避免编辑器失效：

     init: EditorComponent['init'] = {
         language: 'nl',
         language_url: '/tinymce/langs/nl.js',
         base_url: '/tinymce'
     }
     

额外排查点 #

• 版本匹配：语言包版本必须与TinyMCE 5的版本完全一致，版本不匹配会导致加载后无效果或报错
• Assets配置检查：若自定义了angular.json中的assets项，需确保tinymce目录被包含，示例配置如下：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "public/tinymce"
  ]
  

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