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

ckeditor+angularjs directive的更多相关文章

  1. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  2. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  3. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. Angularjs directive全面解读(1.4.5)

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  5. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  8. [译]angularjs directive design made easy

    原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...

  9. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

随机推荐

  1. linux 学习随笔-shell基础知识

    1:用户的shell历史命令保存在home/username/.bash_history中 #!!  执行用户的上一条命令 #!pw  执行命令历史中最近一次以pw开头的命令 2:'*'来匹配零或多个 ...

  2. Linux的主机规划和磁盘分区

    选择与Linux搭配的主机配置 CPU  只要不是老旧到让你的硬件系统死机的都能够支持 RAM 内存越大越好,内存的重要性要比CPU还要高,至少512MB Hard Disk 由于数据量与数据的访问频 ...

  3. Eclipse下还原删除的文件

    做项目的时候,不小心把Eclipse下的么个文件删除了,虽然有svn但是最新修改的代码没有提交,怎么办,在网上查了下,eclipse是可以还原删除文件的.具体做法如下所示 恢复删除的文件 1 在项目上 ...

  4. 微信公众平台开发——微信授权登录(OAuth2.0)

    1.OAuth2.0简介 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户 ...

  5. ELF Format 笔记(十)—— 重定位(relocation)

    ilocker:关注 Android 安全(新手) QQ: 2597294287 重定位就是把符号引用与符号定义链接起来的过程,这也是 android linker 的主要工作之一. 当程序中调用一个 ...

  6. 【转】能否用讲个故事的方式,由浅入深,通俗易懂地解释一下什么是天使投资,VC,PE.

    能否用讲个故事的方式,由浅入深,通俗易懂地解释一下什么是天使投资,VC,PE 今天在知乎上看到一篇文章,觉得值得一转的,Here. 我给楼主讲个完整点的故事吧.长文慎点,前方高能,自备避雷针.18岁以 ...

  7. 第4章 文本编辑器vim

    1. vim常用操作 1.1 vim简介 (1)vim是一个功能强大的全屏幕文本编辑器,是Linux/Unix上最常用的文本编辑器,它的作用是建立.编辑.显示文本文件. (2)vim没有菜单,只有命令 ...

  8. 嵌入式Linux驱动学习之路(十五)按键驱动-定时器防抖

    在之前的定时器驱动程序中,我们发现在连续按下按键的时候,正常情况下应该是一次按下对应一次松开.而程序有时候会显示是两次按下,一次松开.这个问题是因为在按下的时候,因为是机械按键,所以电压信号会产生一定 ...

  9. EasyUI实现工地领款单项目

    环境搭建 引入jar.配置Spring MVC.web.xml.日志等 建表 自动生成MyBatis相关文件 mybatis-generator-core-1.3.2.jar <?xml ver ...

  10. 【C#】【Thread】CountdownEvent任务并行

    System.Threading.CountdownEvent  是一个同步基元,它在收到一定次数的信号之后,将会解除对其等待线程的锁定. CountdownEvent  专门用于以下情况:您必须使用 ...