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: ...
随机推荐
- OracleHelper类
using System; using System.Collections; using System.Collections.Generic; using System.Data; using S ...
- Android使用HttpURLConnection通过POST方式发送java序列化对象
使用HttpURLConnection类不仅可以向WebService发送字符串,还可以发送序列化的java对象,实现Android手机和服务器之间的数据交互. Android端代码: public ...
- linux fdisk命令使用
fdisk 对硬盘及分区的操作,进入fdisk 对硬盘操作阶段 我们可以对硬盘进行分区操作,前提是您把fdisk -l 弄明白了:通过fdisk -l ,我们能找出机器中所有硬盘个数及设备名称:比如上 ...
- 项目开发之UML之初识
- OpenStack云计算快速入门之一:OpenStack及其构成简介
原文:http://blog.chinaunix.net/uid-22414998-id-3263551.html OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助 ...
- bzoj-4514(网络流)
题目链接: 4514: [Sdoi2016]数字配对 Description 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数 ...
- Redis-基于php简单安装使用
1.下载php相关redis扩展(apache选vc6),下载地址: https://github.com/phpredis/phpredis/downloads 2.修改php.ini,增加下面两项 ...
- Linux 进程间通讯详解五
msgrcv函数 ssize_t msgrcv(int msqid, void *msgp, size_t msgsz, long msgtyp,int msgflg); --功能:是从一个消息队列接 ...
- EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题
症状如图: 上图中,行号列与checkbox 列融合了.解决方法是在datagrid 的 onLoadSuccess 事件中加入如下代码: var opts = $(this).datagrid('o ...
- 微信小程序之数据绑定(五)
[未经作者本人允许,请勿以任何形式转载] 前几篇讲述微信小程序开发工具使用.生命周期和事件. 本次讲述微信小程序数据和视图绑定 >>>数据视图绑定 做前端开发的同学,尤其是WEB前端 ...