ckEditor，AngularJS&Bootstrap 3 Modal-insertText(）的行为不稳定

ckEditor, AngularJS & Bootstrap 3 Modal - insertText() behaves erratic

本文关键字：不稳定 Modal-insertText AngularJS amp Bootstrap ckEditor 更新时间：2023-10-12

根据angular JS中用CKEditor内容更新文本区域值，并将CKEditor值绑定到angularjs和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模式中完成的。

通常ckEditor将angularJS作为指令运行得非常好。

在ckeditor的"粘贴状态"事件中，您将值设置为角度模型：-

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

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

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);
                }
            };
        }
    };
}]);