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