angular js ckeditor directive示例代码

js版本：

var cmsPlus = angular.module('cmsPlus', []);

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

      if (!ngModel) return;

      ck.on('instanceReady', function() {
        ck.setData(ngModel.$viewValue);
      });

      function updateModel() {
          scope.$apply(function() {
              ngModel.$setViewValue(ck.getData());
          });
      }

      ck.on('change', updateModel);
      ck.on('key', updateModel);
      ck.on('dataReady', updateModel);
      ck.on('paste', updateModel);
      ck.on('selectionChange', updateModel);

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

typeScript版本：

export interface ckeditorDirectiveInterface extends ng.IAttributes {
    ckeditorDirective: string;
}

export class ckeditorDirective implements ng.IDirective {
    restrict = "A";

    constructor(private $log: ng.ILogService, private $parse: ng.IParseService, private $window: GlobalDefinitionInterface) {}

    static instance(): ng.IDirectiveFactory {
        const directive = ($log: ng.ILogService, $parse: ng.IParseService, $window: GlobalDefinitionInterface) =>
            new ckeditorDirective($log, $parse, $window);
        directive.$inject = ['$log', '$parse', '$window'];
        return directive;
    }
    require = '?ngModel';
    link = (scope: ng.IScope, elm: Element, attrs: ckeditorDirectiveInterface, ngModel: ng.INgModelController): void => {
        let $log = this.$log;
        let $window = this.$window;
        let element = angular.element(elm);
        $log.debug("CKeditor version number："+CKEDITOR.version);
        
        $log.debug((<any> CKEDITOR.instances)["content"]);
        
        //如果CKEDITOR已经创建存在则执行destroy
        if ((<any> CKEDITOR.instances)["content"]) {
            (<any> CKEDITOR.instances)["content"].destroy();
        }
        
        $log.debug((<any> CKEDITOR.instances)["content"]);
        
        //保持始终创建新的CKEDITOR
        var ckeditor = CKEDITOR.replace(<HTMLTextAreaElement> element[0]);        
        
        $log.debug((<any> CKEDITOR.instances)["content"]);
        if (!ngModel) return;
        ckeditor.on('instanceReady', function () {
            ckeditor.setData(ngModel.$viewValue);
        });

        function updateModel() {                                
            //输入内容更新到model
            scope.$apply(function(){
                ngModel.$setViewValue(ckeditor.getData());
                $log.debug(ckeditor.getData());
            });
        }
        
        ckeditor.on('change', updateModel);
        ckeditor.on('key', updateModel);
        ckeditor.on('dataReady', updateModel);
        ckeditor.on('paste', updateModel);
        ckeditor.on('selectionChange', updateModel);
        ngModel.$render = function () {
            ckeditor.setData(ngModel.$viewValue);
        };

    }

}