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: ...
随机推荐
- Linux命令学习总结: file命令
命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...
- Linux命令学习总结:shutdown
命令简介: 该命令可以安全关闭或者重新启动系统.你没有看错,shutdown命令不仅可以关闭系统.也可以重启Linux系统. 命令语法: /sbin/shutdown [-t sec] [-ark ...
- GConf error:Failed to contact configuration server
Linux系统运行一直正常,但是图形界面使用root账号登录时遇到下面错误,第一次遇到这么怪异的状况 具体错误信息如下所示: GConf error:Failed to contact configu ...
- .NET应用架构设计—工作单元模式(摆脱过程式代码的重要思想,代替DDD实现轻量级业务)
阅读目录: 1.背景介绍 2.过程式代码的真正困境 3.工作单元模式的简单示例 4.总结 1.背景介绍 一直都在谈论面向对象开发,但是开发企业应用系统时,使用面向对象开发最大的问题就是在于,多个对象之 ...
- SQL Server 2008 R2——使用计算列为表创建自定义的自增列
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- 【2016-11-2】【坚持学习】【Day17】【通过反射自动将datareader转为实体info】
通过ADO.net 查询到数据库的数据后,通过DataReader转为对象Info public class BaseInfo { /// <summary> /// 填充实体 /// & ...
- UVA 10564 Paths through the Hourglass[DP 打印]
UVA - 10564 Paths through the Hourglass 题意: 要求从第一层走到最下面一层,只能往左下或右下走 问有多少条路径之和刚好等于S? 如果有的话,输出字典序最小的路径 ...
- webstrom live templates
javascript: 在live templates底部要选择javascript # $('#$END$') $ $($end$) $bd $(document.body) $d $(docume ...
- Microsoft Client Development MVP 2013 - 2014
周末一直沉浸在醉意中,为婚礼忙忙碌碌了一个月,终于完成了人生一大喜事. 清晨仍旧有一些宿醉得感觉, 看到来自微软的邮件,获得Microsoft Client Development MVP 2013 ...
- 解决Ajax不能跨域的方法
1. Ajax不能跨域请求的原因 同源策略(Same Origin Policy),是一种约定,该约定阻止当前脚本获取或者操作另一个域下的内容.所有支持Javascript的浏览器都支持同源策略,也 ...