基于AngularJS的MVC及Umbraco项目中TinyMCE编辑器验证失效问题咨询

看起来你遇到的核心问题是Umbraco封装的富文本编辑器（umb-property-editor的rte类型）没有和AngularJS的表单验证机制同步，而且手动初始化TinyMCE事件的方式和Umbraco的内置实例冲突了。下面是分步解决方案：

1. 修复表单验证绑定问题 #

首先，你的umb-property-editor绑定的是rteDescription这个model，但你期望验证的是vm.Description，二者没有同步起来。Umbraco的RTE控件会把编辑器内容存在model.value属性里，所以你需要：

调整HTML代码 #

把umb-property-editor的model和必填属性调整为：

<tr>
  <ng-form name="rteForm">
    <umb-property-editor 
      model="rteDescription" 
      ng-required="true"
      ng-model="vm.Description">
    </umb-property-editor>
  </ng-form>
</td>
</tr>

同时，修改保存按钮的禁用条件，确保包含子表单的状态：

<umb-button 
  action="vm.save()" 
  label="Save" 
  type="button" 
  disabled="evaluationForm.$invalid || rteForm.$invalid" 
  button-style="action">
</umb-button>

同步RTE model和vm.Description #

在控制器里，初始化rteDescription时绑定value到vm.Description，这样编辑器内容变化时会自动同步：

$scope.rteDescription = { 
  view: "rte", 
  value: vm.Description, // 绑定到你的视图模型
  config: { 
    editor: { 
      toolbar: ["ace", "undo", "redo", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "fullscreen"], 
      style_formats: [{ title: "Heading 1", inline: "h1" }], 
      plugins: ["fullscreen"], 
      stylesheets: [], 
      dimensions: { height: 300 } 
    } 
  } 
};

2. 正确监听TinyMCE变更事件（替代手动init） #

你手动调用tinymce.init()会和Umbraco已经初始化的编辑器实例冲突，所以要通过Umbraco的方式获取编辑器实例并监听事件：

在控制器里添加以下代码，等待Umbraco初始化完RTE后监听change事件，并触发Angular的digest更新表单状态：

// 等待Umbraco加载完编辑器
setTimeout(function() {
  // 获取Umbraco创建的TinyMCE实例（通常ID是rteDescription对应的DOM元素ID，或者通过编辑器名称获取）
  var editor = tinymce.get('rteDescription'); // 如果ID不对，可以用tinymce.editors[0]先测试
  if (editor) {
    editor.on('change', function() {
      console.log('RTE内容已变更');
      // 同步编辑器内容到model.value
      $scope.rteDescription.value = editor.getContent();
      // 触发Angular的脏检查，更新表单验证状态
      $scope.$apply();
    });
  }
}, 1000); // 延迟1秒确保编辑器初始化完成，也可以用Umbraco的ready事件替代

或者更优雅地使用Umbraco的editorReady事件（如果你的Umbraco版本支持）：

$scope.$on('editorReady', function(event, editor) {
  if (editor.id === 'rteDescription') { // 匹配你的编辑器ID
    editor.on('change', function() {
      $scope.rteDescription.value = editor.getContent();
      $scope.$apply();
    });
  }
});

3. 强制表单验证更新（兜底方案） #

如果上面的步骤后还是有问题，可以在保存前手动触发表单验证，或者监听vm.Description的变化来更新表单状态：

$scope.$watch('vm.Description', function(newVal) {
  // 当内容变化时，手动设置rteForm的$valid状态
  if ($scope.rteForm) {
    if (newVal && newVal.trim().length > 0) {
      $scope.rteForm.$setValidity('required', true);
    } else {
      $scope.rteForm.$setValidity('required', false);
    }
  }
});

关键原理说明 #

• Umbraco的umb-property-editor是封装过的组件，它内部的TinyMCE实例不会自动触发Angular的脏检查，所以需要手动调用$scope.$apply()来同步状态。
• 直接手动初始化TinyMCE会覆盖Umbraco的实例，导致事件监听失效，必须复用Umbraco已经创建的编辑器实例。
• 嵌套的ng-form需要单独检查$invalid状态，否则父表单evaluationForm可能无法感知子表单的验证结果。

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