Question

我在AngularJS webapp中使用CKEditor。我定义了事件pasteState来收听文字更改并将其复制到我的ng-model。

今天，我将CKEditor从版本4.4.7升级到4.5.1（最后一个），并发现我的pasteState事件永远不会被触发。

我的change事件指令：

appDrct.directive('ckEditor', function() {
    return {
        require: '?ngModel',
        link: function($scope, $elm, attr, ngModel) {

            var config = {
                toolbar:[[ 'Bold', 'Italic', 'Underline', 'Strike', 'TextColor', 'FontSize', '-', 'JustifyLeft', 'JustifyRight' ]]
            };
            config.removeButtons = '';
            config.fontSize_sizes = 'petit/12px;normal/14px;grand/16px;';

            var ck = CKEDITOR.inline ($elm[0], config);

            if (!ngModel) return;

            //ck.on('pasteState', function() {
            ck.on('change', function() {
                console.log(ck.mode);
                $scope.$apply(function() {
                    ngModel.$setViewValue(ck.getData() || '');
                });
            });    

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

            $scope.$on("$destroy",function() {
                CKEDITOR.instances[ck.name].destroy();
            });
        }
    };
});

Answer 1

在CKEditor的公共API中没有“pasteState”，所以尝试使用类似的东西似乎很奇怪（内容更改和粘贴状态之间可以存在什么样的关系？）

您似乎应该使用“change”。

Answer 2

你应该听以下事件： dataReady，change，blur，saveSnapshot。

来自ng-ckeditor的源代码：

['dataReady', 'change', 'blur', 'saveSnapshot'].forEach(function(event) {
  ckeditor.$on(event, function syncView() {
    ngModel.$setViewValue(ckeditor.instance.getData() || '');
  });
});

但是，我的建议是重用已经存在的项目，如果您发现错误或可以改进，您可以建议修改（拉取请求）并制作可重复使用的代码。

在简短的搜索中，我找到了两个好项目：

修改

如果您真的想要一个简单版本，可以使用此working demo：

var app = angular.module('app', []); app.directive('ckEditor', [function () { return { require: '?ngModel', link: function ($scope, elm, attr, ngModel) { var ck = CKEDITOR.replace(elm[0]); ck.on('change', function() { $scope.$apply(function () { ngModel.$setViewValue(ck.getData()); }); }); ngModel.$render = function (value) { ck.setData(ngModel.$modelValue); }; $scope.$on("$destroy",function() { ck.destroy(); }); } }; }]);

使用AngularJS实现CKEditor（pasteState事件）

2 个答案: