Angularjs 与Ckeditor
Angularjs 与Ckeditor
Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化(Module机制
)、自动化双向数据绑定、语义化标签(Directive
)、依赖注入、路由(Route)机制、服务(services)机制等等。以前也用过Jquery、Extjs等,现在刚开始接触AngularJS,感觉这是一个很吸引人的一个框架。
学习网址:
- http://www.angularjs.org
- http://www.angularjs.cn/tag/AngularJS AngularJS 中文社区
- http://www.360doc.com/content/13/0729/13/13328522_303333441.shtml AngularJS 学习笔记
我们在做B/S系统是经常会用到在线编辑器(FreeTextBox,Ckeditor,KindEditor等等),我比较常用的是kindEditor和ckEditor。
开始打算用kindEditor,

mainApp.directive('kindeditor', function() {
return {
require : '?ngModel',
link : function(scope, element, attrs, ngModel) {
var editor;
KindEditor.ready(function(K) {
editor = K.create(element[0], {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
if (!ngModel) {
return;
}
editor.on('instanceReady', function() {
editor.setData(ngModel.$viewValue);
});
editor.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(editor.getData());
});
});
ngModel.$render = function(value) {
editor.setData(ngModel.$viewValue);
};
}
};
});

不过没有成功,原因使Editor 需要在KindEditor.ready中初始化,后面的editor为undefined,所以edito.on()等无法运行,这个地方可能会有其他方法,但是我暂时没有找到方法,如果有朋友找到,可以交流下。
然后有使用了ckeditor写了一个指令

/**
* ckeditor Directive
* @author 张世民 @ 数云图
*/
mainApp.directive('ckeditor', function() {
return {
require : '?ngModel',
link : function(scope, element, attrs, ngModel) {
var ckeditor = CKEDITOR.replace(element[0], { });
if (!ngModel) {
return;
}
ckeditor.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ckeditor.getData());
});
});
ngModel.$render = function(value) {
ckeditor.setData(ngModel.$viewValue);
};
}
};
});

这样可以成功使用了。
但是在编辑时又发现问题了,在第二次编辑时没有执行
1
|
ckeditor.setData(ngModel.$viewValue); |
又给ckeditor绑定了instanceReady事件,这样用起来比较完美了,最后ckeditor指令如下

/**
* ckeditor Directive
* @author 张世民 @ 数云图
*/
mainApp.directive('ckeditor', function() {
return {
require : '?ngModel',
link : function(scope, element, attrs, ngModel) {
var ckeditor = CKEDITOR.replace(element[0], { });
if (!ngModel) {
return;
}
ckeditor.on('instanceReady', function() {
ckeditor.setData(ngModel.$viewValue);
});
ckeditor.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ckeditor.getData());
});
});
ngModel.$render = function(value) {
ckeditor.setData(ngModel.$viewValue);
};
}
};
});

用法简单,只需要在html标签上加入ckeditor 指令
<textarea ckeditor ng-model="entity.catalog" class="form-control"></textarea>
补充:
几位朋友说Ueditor挺好用的,测试了一下,写了一个AngularJs的Ueditor指令

mainApp.directive('ueditor', function() {
return {
require : '?ngModel',
link : function(scope, element, attrs, ngModel) {
var ueditor = UE.getEditor(element[0], {
//配置
});
if (!ngModel) {
return;
}
ueditor.on('instanceReady', function() {
ueditor.setContent(ngModel.$viewValue);
});
ueditor.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ueditor.getContent());
});
});
ngModel.$render = function(value) {
ueditor.setContent(ngModel.$viewValue);
};
}
};
});

用法只需在Html标签上加上ueditor指令
<textarea ueditor ng-model="entity.catalog" class="form-control"></textarea>
Angularjs 与Ckeditor的更多相关文章
- angularjs中ckeditor的destroy问题
项目中,在切换了页面的tab页后会发现上传图片的操作报错,检查后发现问题根源是切换了tab页重新加载页面时ckeditor又会创建一次,这个时候的ckeditor已经不是第一次创建的那个了,所以上传图 ...
- AngularJS+ckEditor管理ng-model
1.首先去ckeditor的官网下载ckeditor包,http://ckeditor.com/download: 2.把ckeditor文件夹放入工程中(webapp文件夹下能访问到的都行). 3. ...
- ckeditor+angularjs directive
var cmsPlus = angular.module('cmsPlus', []); cmsPlus.directive('ckEditor', function() { return { req ...
- Angularjs中添加ckEditor插件
使用方法看注释.主要解决帮上ngModel的问题 angular.module('newApp') .directive('ckeEditor', function() { return { /* F ...
- angular+ckeditor最后上传的最后一张图片不会被添加(bug)
做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model=& ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
随机推荐
- 于Unity3D调用安卓AlertDialog
例如,下面的示例代码演示 package com.sample.sampletest; import android.app.AlertDialog; import android.content.D ...
- MVC中使用SignalR
MVC中使用SignalR打造酷炫实用的即时通讯功能附源码 前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时 ...
- webserver实现
最近的工作需求client和server使用https协议进行通讯,我负责client编写程序,在操作系统的-depth理解认为一旦前webserver实现,整理代码: #include"a ...
- 基于ORACLE建表和循环回路来创建数据库存储过程SQL语句来实现
一个.概要 在实际的软件开发项目.我们经常会遇到需要创造更多的相同类型的数据库表或存储过程时,.例如.假设按照尾号点表的ID号,然后,你需要创建10用户信息表,的用户信息放在同一个表中. 对于类型同样 ...
- .net在arraylist用法
1.什么是ArrayListArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本号,它提供了例如以下一些优点: 动态的添加和降低元素 实现了ICollection和IL ...
- C++ friend 用法汇总
C++这位朋友同意之类的非公共成员的机制是一个类或函数访问,根据朋友的类型分为三种类型:一般非类成员函数为好友,类成员函数为好友.类为好友. 1 内容朋友 包括报表朋友的朋友以及朋友的定义.明默的感觉 ...
- Eclipse UML小工具AmaterasUML的配置和使用
AmaterasUML是个人认为最好用的Eclipse UML插件,能够通过拖拽Java源文件,轻松生成类图结构.同一时候支持活动图.时序图和用例图. 它的官方下载地址是:http://sourcef ...
- 大数据系列修炼-Scala课程04
Scala中继承实现:超类的构造.字段重写.方法重写 关于超类的构建:超类可以在子类没有位置的限制,可以在子类中调用父类的方法 类中字段重写:在重写字段前面加一个override就可以重新赋值 类中方 ...
- 关于”机器学习方法“,"深度学习方法"系列
"机器学习/深度学习方法"系列,我本着开放与共享(open and share)的精神撰写,目的是让很多其它的人了解机器学习的概念,理解其原理,学会应用.如今网上各种技术类文章非常 ...
- [注意事项&车轮]java源代码 产生局部javadoc api档
随着Eclipse书写java码时间,有时候,因为我们不知道java函数返回.通过鼠标移动到java该功能,假设它javadoc相关内容将被显示. 但是,并非所有java代码javadoc:连装jav ...