Question

根据Updating textarea value with CKEditor content in Angular JS和Bind Ckeditor value to model text in angularjs and rails

，我有以下角度指令

angular.module('ngTeknorix')
 .directive('ckEditor', ['$timeout', function ($timeout) {
  return {
    require: '?ngModel',
    link: function (scope, elm, attr, ngModel) {
        var ck = CKEDITOR.replace(elm[0]);

        if (!ngModel) return;

        ck.on('change', function () {
            scope.$apply(function () {
                ngModel.$setViewValue(ck.getData());
            });
        });

        ngModel.$render = function (value) {
            ck.setData(ngModel.$viewValue);
        };

        // This breaks!!
        scope.addConfirmationLink = function () {
            ck.insertText("Inserted Text");
        }
    }
 };  
}]);

这对于正常操作非常好，但是一旦我尝试使用insertText或insertHtml函数在光标位置插入文本，它就会表现不稳定。它有时会插入文本一次..有时两次..

任何想法？

注意：所有这些都是在Bootstrap模式中完成的。

Answer 1

通常ckEditor在angularJS作为指令时工作得非常好。

在ckeditor的'pastestate'事件中，您将值设置为角度模型： -

ck.on('pasteState', function () {
  $timeout(function () {
    ngModel.$setViewValue(ck.getData());
  });
});

另一种方法是将值设置为ckEditor，使用$ render函数。

ngModel.$render = function (value) {
  ck.setData(ngModel.$viewValue);
};

当你使用像insertText（）或insertHtml（）这样的ckEditor函数时，所有东西都会折腾，因为pastestate事件会立即被触发（否则会在延迟后被调用）。当第二次调用insertText（）并将文本添加两次，第三次增加三次，等等时，它的行为不稳定。

因此，要使ckEditor与Bootstrap Modal和AngularJS一起使用，我们必须在关闭模态时使用ckeditor的destroy函数....

angular.module('ngTeknorix')
.directive('ckEditor', ['$timeout', function ($timeout) {
    return {
        require: '?ngModel',
        link: function ($scope, $element, $attrs, ngModel) {
            $scope.initCkEditor = function () {
                var ck = CKEDITOR.replace($attrs.id);
                ck.on('pasteState', function () {
                    $timeout(function () {
                        ngModel.$setViewValue(ck.getData());
                    });
                });
                ngModel.$render = function () {
                    ck.setData(ngModel.$viewValue);
                };
                $scope.insertText = function (value) {
                    ck.insertText(value);
                }
            };
            $scope.destroyCkEditor = function () {
                if (CKEDITOR.instances[$attrs.id]) {
                    CKEDITOR.instances[$attrs.id].destroy(false);
                }
            };
        }
    };
}]);

ckEditor，AngularJS＆amp; Bootstrap 3模态 - insertText（）表现不稳定

1 个答案: