Angular 14集成TinyMCE报错：Failed to load model: dom

错误原因 #

该错误是因为TinyMCE的核心依赖资源（如models、themes、plugins等目录文件）未被部署到Angular项目的可访问路径中，导致编辑器初始化时无法加载必要的组件文件。

修复步骤 #

1. 配置Angular资源复制规则 #

修改angular.json文件，在assets数组中添加TinyMCE资源的复制配置，确保构建时将node_modules中的TinyMCE文件同步到项目输出目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/tinymce/",
    "output": "/tinymce/"
  }
]

2. 调整编辑器初始化配置（可选） #

确保编辑器的base_url指向正确的资源路径，可添加suffix参数指定加载压缩版资源：

<editor
  [init]="{
    base_url: '/tinymce',
    suffix: '.min'
  }"
  formControlName="body"
></editor>

3. 验证模块配置的脚本路径 #

确认模块中TINYMCE_SCRIPT_SRC的路径与资源输出路径一致（当前配置已正确，无需修改）：

providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]

4. 重启Angular开发服务器 #

修改angular.json后必须重启ng serve，确保新的资源配置生效。

版本兼容性说明 #

你使用的@tinymce/tinymce-angular@7.0.0与tinymce@6.3.2版本兼容（tinymce-angular 7.x适配TinyMCE 6.x），无需调整版本。

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