Внедрить CKEditor с AngularJS (pasteState event)

Question

Я использую CKEditor в своем веб-браузере AngularJS. Я определил событие 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

Вы должны слушать следующие события: dataReady, change, blur, saveSnapshot.

Из исходного кода ng-ckeditor:

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

Но, мое предложение повторно использовать проект, который уже существует, если вы нашли что-то неправильно, или что может быть улучшены, вы можете предложить (запрос тянущего) модификации и сделать многоразовый код.

В кратком поиске я нашел два хороших проектов:

• https://github.com/lemonde/angular-ckeditor
• https://github.com/esvit/ng-ckeditor

EDIT:

Если вы действительно хотите простой вариант, вы можете использовать это 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(); 
      }); 
     } 
    }; 
}]); 

Answer 2

Там нет «pasteState» в общественном API в CKEditor, так что кажется странным пытается использовать что-то вроде этого (какого рода отношения могут существует между изменение содержимого и состояние пасты?)

Похоже, что вместо этого вы должны использовать 'change'.