TinyMCE <textarea>与AngularJS绑定的两种方式

Question

是否有可能将双向绑定应用于已将TinyMCE应用于Rich Text Formatting的<textarea></textarea>。

我不能让它工作！我可以让TinyMCE加载我的模型的内容，但是当我更新TinyMCE中的文本时，我的模型不会自动更新！

有没有办法？任何帮助将不胜感激。

谢谢。

Answer 1

你可以通过创建你自己的指令来做到这一点。

您需要做的是在TinyMCE编辑器中的某些内容发生更改时让您的指令同步您的模型。我没有使用TinyMCE，但Wysihtml5。我认为你可以改造这个来代替使用TinyMCE。

angular.module('directives').directive('wysihtml5', ['$timeout', 
function ($timeout) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     template: "<textarea></textarea>", // A template you create as a HTML file (use templateURL) or something else... 
     link: function ($scope, $element, attrs, ngModel) { 

      // Find the textarea defined in your Template 
      var textarea = $element.find("textarea"); 

      // When your model changes from the outside, use ngModel.$render to update the value in the textarea 
      ngModel.$render = function() { 
       textarea.val(ngModel.$viewValue); 
      }; 

      // Create the editor itself, use TinyMCE in your case 
      var editor = new wysihtml5.Editor(textarea[0], 
       { 
        stylesheets: ["/style.css"], 
        parserRules: wysihtml5ParserRules, 
        toolbar: true, 
        autoLink: true, 
        useLineBreaks: false, 
       }); 

      // Ensure editor is rendered before binding to the change event 
      $timeout(function() { 

       // On every change in the editor, get the value from the editor (textarea in case of Wysihtml5) 
       // and set your model 
       editor.on('change', function() { 
        var newValue = textarea.val(); 

        if (!$scope.$$phase) { 
         $scope.$apply(function() { 
          ngModel.$setViewValue(newValue); 
         }); 
        } 
       }); 

      }, 500); 
     } 
    }; 
}]); 

然后你可以使用该指令在HTML页面中是这样的：

<wysihtml5 ng-model="model.text" /> 

这里有一个链接，如果你需要创建自己的指令的详细信息：http://docs.angularjs.org/guide/directive

Answer 2

也比较渲染功能从上面的指令到这个渲染函数from angular-ui-tinymce（https://github.com/angular-ui/ui-tinymce）

ngModel.$render = function() { 
    if (!tinyInstance) { 
    tinyInstance = tinymce.get(attrs.id); 
    } 
    if (tinyInstance) { 
    tinyInstance.setContent(ngModel.$viewValue || ''); 
    } 

Plnkr：http://plnkr.co/edit/04AFkp?p=preview

但是，根据加载DOM的时机，您可能需要在指令上向上设置优先级。 :-)

Answer 3

这是我的解决方案使用自定义角度指令。 你需要使用jQuery与angularJS，TinyMCE 4和他们的jQuery插件。

myApp.directive('tinymce', function() { 
    return { 
     restrict: 'C', 
     require: 'ngModel', 
     link: function(scope, element, attrs, modelCtrl) { 
     element.tinymce({ 
      setup: function (e) { 
       e.on("change", function() { 
        modelCtrl.$setViewValue(element.val()); 
        scope.$apply(); 
       } 
      } 
     }); 
     } 
    } 
} 

然后在你的HTML：

<textarea class="tinymce" ng-model="data"></textarea> 

就是这样，有乐趣。