Angular集成TinyMCE 6外部MathType插件加载失败求助

错误原因 #

你配置的插件路径node_modules/@wiris/mathtype-tinymce6/plugin.min.js无法在Angular运行时访问——Angular构建打包后不会保留node_modules的直接访问路径，导致插件加载失败。

解决步骤 #

1. 确认依赖安装 #

确保已正确安装MathType插件包：

npm install @wiris/mathtype-tinymce6 --save

2. 配置Angular静态资源复制 #

修改angular.json，将插件文件复制到项目assets目录，确保构建后可正常访问：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "plugin.min.js",
    "input": "./node_modules/@wiris/mathtype-tinymce6/",
    "output": "./assets/mathtype/"
  }
]

3. 修正TinyMCE配置 #

调整组件中的tinymceConfig，修正插件路径并移除冗余配置：

export class PageComponent {
  tinymceConfig = {};
  constructor(private request: RequestService) {
    this.tinymceConfig = {
      external_plugins: {
        'tiny_mce_wiris': 'assets/mathtype/plugin.min.js',
      },
      toolbar: 'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
      draggable_modal: true,
      extended_valid_elements: '*[.*]',
      plugins: 'lists link image table code help wordcount', // 外部插件无需加入plugins数组
      language: 'ru',
    };
  }

  async testEvent() {
    await this.request.postRequest(`${environment.apiUrl}/api/auth/account/islogging`, []);
  }
}

4. 补充公式渲染依赖（可选但建议） #

MathType需要MathJax渲染公式，在index.html中添加MathJax脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script>
<script>
  MathJax.Hub.Config({
    showMathMenu: false,
    tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] }
  });
</script>

完成以上步骤后，重启Angular项目，MathType插件即可正常加载使用。

内容的提问来源于stack exchange，提问作者Бекзат Сайлаубаев