ckeditor+angularjs 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);
}; } }
ckeditor+angularjs directive的更多相关文章
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- Angularjs directive全面解读(1.4.5)
说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...
- angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- AngularJS Directive 隔离 Scope 数据交互
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...
- [译]angularjs directive design made easy
原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...
- AngularJS directive 指令相关记录
.... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...
随机推荐
- Oracle Linux(64位)安装64位Oracle10g遇到ins_ctx.mk问题
在Oracle Linux Server Release 5.7上安装64位Oracle 10g 时,遇到如下问题: Error in invoking target 'install' of mak ...
- Linux SendMail发送邮件失败诊断案例(二)
Linux上Sendmail经常由于一些配置问题,导致邮件发送失败,下面整理.收集了一些邮件发送失败.异常的案例. 案例1:在新服务器上测试sendmail发送邮件时,发现邮件发送不成功,检查/var ...
- 如何查看Windows服务器运行了多长时间
前言:有时候管理.维护Windows服务器需要定期重启服务器(为什么需要重启,你懂的),但是这个"定期"有时候会受很多因素影响,例如某台服务器忘了重启:某台服务器那个时间段业务繁忙 ...
- Oracle 12c 使用scott等普通用户的方法
目录: 一.前言 二.使用普通用户 三.自动启动PDB 一.前言 最近电脑上安装了oracle 12c数据库,想体验下新特性.安装完后,便像11g一样在dos窗口进行下面的操作: SQL Produc ...
- 动手实践虚拟网络 - 每天5分钟玩转 OpenStack(10)
本节将演示如何在实验环境中实现下图所示的虚拟网络 配置 Linux Bridge br0 编辑 /etc/network/interfaces,配置 br0. 下面用 vimdiff 展示了对 /et ...
- JavaScript的写类方式(6)
时间到了2015年6月18日,ES6正式发布了,到了ES6,前面的各种模拟类写法都可以丢掉了,它带来了关键字 class,extends,super. ES6的写类方式 // 定义类 Person c ...
- getSupportFragmentManager要用在FragmentActivity及其子类中
getSupportFragmentManager要用在FragmentActivity及其子类中!! 关于安卓抽屉导航!! * 自定义侧边栏
- 解决Android Graphical Layout 界面效果不显示
解决Android Graphical Layout 界面效果不显示 qq463431476
- [转]Python 字符串操作实现代码(截取/替换/查找/分割)
原文地址:http://www.jb51.net/article/38102.htm ps:好久没更新python代码了,这次用到了字符串,转来看看 Python 截取字符串使用 变量[头下标:尾下标 ...
- 今天主要推荐一下django学习的网址!
前言:每个月忙碌的头20天后,在上班时间投入到django理论学习的过程中,花了差不多3天时间简单的研究了一下django,着实废了我不少脑细胞. 采用虫师前辈的一张图和话: 如果你把这过程梳理清晰了 ...