.NET Web项目中TinyMCE编辑器无法正常工作

我正尝试用TinyMCE把TextArea控件转成HTML编辑器，同时保留原有的ng-model数据绑定。已导入工具最新版本，脚本按照TinyMCE的.NET项目文档编写，但未成功。试过将脚本移到head标签、页面底部、共享布局的脚本区域，仍未出现预期的HTML编辑器，页面还存在警告问题。

排查方向 #

1. 适配AngularJS双向绑定 #

要保留ng-model，不能直接用原生TinyMCE初始化方式，需做适配：

• 若用官方集成指令，需引入tinymce-angular模块并在AngularJS模块中注入对应依赖（如ui.tinymce）
• 手动绑定需同时处理编辑器与模型的同步：

  tinymce.init({
    selector: '#target-textarea',
    setup: function(editor) {
      // 编辑器内容变更同步到ng-model
      editor.on('input', function() {
        $scope.yourModel = editor.getContent();
        $scope.$apply();
      });
      // ng-model变更同步到编辑器
      $scope.$watch('yourModel', function(newVal) {
        if (newVal !== editor.getContent()) {
          editor.setContent(newVal);
        }
      });
    }
  });
  

2. 核对脚本加载顺序 #

• 确保加载顺序为：AngularJS核心 → TinyMCE核心脚本 → 初始化脚本
• 避免DOM未加载完成时执行初始化，可将初始化代码放在angular.element(document).ready()回调中

3. 解析页面警告 #

从警告截图来看，优先排查：

• 浏览器控制台的具体错误信息（如资源加载404、变量未定义）
• 确认TinyMCE初始化的selector参数与目标TextArea的ID/CSS选择器完全匹配，无拼写错误

4. 验证资源路径 #

• 检查NuGet安装的TinyMCE包资源路径是否正确，页面能正常加载tinymce.min.js等核心文件
• 若用CDN加载，确认链接可用且未被拦截

5. 排除环境干扰 #

• 检查浏览器插件（如广告拦截器）是否阻止了TinyMCE资源加载
• 确认.NET项目（如ASP.NET MVC/CORE）无静态资源访问限制

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