TinyMCE<；textarea>；带AngularJS的双向绑定

是否可以对已应用TinyMCE进行富文本格式设置的

应用双向绑定

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

---

有办法吗

您可以通过创建自己的指令来实现这一点

您需要做的是，当TinyMCE编辑器中的某些内容发生更改时，让您的指令同步您的模型。我没有使用TinyMCE，而是所见即所得的HTML5。我想你可以改用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);
        }
    };
}]);

angular.module（'directives'）。directive（'wysihtml5'，['$timeout'，
函数（$timeout）{
返回{
限制：'E'，
要求：'ngModel'，
模板：“”，//创建为HTML文件（使用templateURL）或其他内容的模板。。。
链接：函数（$scope、$element、attrs、ngModel）{
//查找模板中定义的文本区域
var textarea=$element.find（“textarea”）；
//当模型从外部更改时，请使用ngModel.$render更新textarea中的值
ngModel.$render=函数（）{
textarea.val（ngModel.$viewValue）；
};
//创建编辑器本身，在您的案例中使用TinyMCE
var editor=新的所见即所得HTML5.editor（textarea[0]，
{
样式表：[“/style.css”]，
parserRules:wysihtml5ParserRules，
工具栏：对，
自动链接：对，
useLineBreaks:false，
});
//确保在绑定到更改事件之前呈现编辑器
$timeout（函数（）{
//在编辑器中的每次更改中，从编辑器中获取值（Wysihtml5的情况下为textarea）
//并设置您的模型
on（'change'，function（）{
var newValue=textarea.val（）；
如果（！$scope.$$phase）{
$scope.$apply（函数（）{
ngModel.$setViewValue（newValue）；
});
}
});
}, 500);
}
};
}]);

然后，您可以在html页面中使用该指令，如下所示：

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

---

如果您需要有关创建自己的指令的更多信息，这里有一个链接：

还要将上述指令中的渲染函数与angular ui tinymce（）中的渲染函数进行比较

Plnkr：

---

但是，根据加载DOM的时间，您可能需要向上设置指令的优先级。：-）

这是我使用自定义角度指令的解决方案。 您需要将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>

就这样，玩得开心

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