TinyMCE的＆LT; TextArea＆GT;双向绑定AngularJS [英] TinyMCE <textarea> two way bound with AngularJS

问题描述

是否可以应用两种方式结合到＆LT; textarea的＆GT;＆LT; / textarea的方式＆gt; 已经有TinyMCE的应用到它的丰富文本格式

Is it possible to apply two way binding to a <textarea></textarea> that has had TinyMCE applied to it for Rich Text Formatting.

我无法得到它的工作！我能得到TinyMCE的加载我的模型的内容，但是当我更新TinyMCE的文字，我的模型不自动更新！

I can't get it to work! I can get TinyMCE to load the content of my model, but when I update the text in TinyMCE, my model does not auto update!

有没有办法？任何帮助将大大AP preciated。

Is there a way? Any help would be greatly appreciated.

感谢你。

推荐答案

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

You can do this by creating your own directive.

您需要做的就是让你的指令同步你的模型时东西在TinyMCE的编辑修改。我没有使用TinyMCE的，但Wysihtml5。我想你可以重拍这将TinyMCE来代替。

What you need to do is to let your directive sync your model when something in the TinyMCE editor changes. I have not used TinyMCE, but Wysihtml5. I think you can remake this to use TinyMCE instead.

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页面是这样的：

Then you can use the directive in your html page like this:

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

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

Here's a link if you need more info on creating your own directive: http://docs.angularjs.org/guide/directive

这篇关于TinyMCE的＆LT; TextArea＆GT;双向绑定AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！