TinyMCE <textarea> 与AngularJS双向绑定

Question

是否可以将双向绑定应用于已将TinyMCE应用于富文本格式的<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

同时将上面指令中的渲染函数与来自 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 || '');
  }

波兰兹罗兰： 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>

就是这样，玩得开心。