Angularjs 与Ckeditor

Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化(Module机制)、自动化双向数据绑定、语义化标签(Directive)、依赖注入、路由(Route)机制、服务(services)机制等等。以前也用过Jquery、Extjs等,现在刚开始接触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的更多相关文章

  1. angularjs中ckeditor的destroy问题

    项目中,在切换了页面的tab页后会发现上传图片的操作报错,检查后发现问题根源是切换了tab页重新加载页面时ckeditor又会创建一次,这个时候的ckeditor已经不是第一次创建的那个了,所以上传图 ...

  2. AngularJS+ckEditor管理ng-model

    1.首先去ckeditor的官网下载ckeditor包,http://ckeditor.com/download: 2.把ckeditor文件夹放入工程中(webapp文件夹下能访问到的都行). 3. ...

  3. ckeditor+angularjs directive

    var cmsPlus = angular.module('cmsPlus', []); cmsPlus.directive('ckEditor', function() { return { req ...

  4. Angularjs中添加ckEditor插件

    使用方法看注释.主要解决帮上ngModel的问题 angular.module('newApp') .directive('ckeEditor', function() { return { /* F ...

  5. angular+ckeditor最后上传的最后一张图片不会被添加(bug)

    做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model=& ...

  6. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  7. AngularJs之九(ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  8. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  9. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

随机推荐

  1. 关于继承modelDriven接口action的ajax来电参数

    例如   Model类如下面,Teacher,public class Teacher{  private Integer id. priavte  String name;  private Sch ...

  2. 通过.NET实现后台自动发送Email功能的代码示例

    原文:通过.NET实现后台自动发送Email功能的代码示例 通过.NET实现后台自动发送邮件功能的代码,可以将一些基础信息放到web.config文件中进行保存: Web.config文件信息段: & ...

  3. 问题(bug)确实不在代码逻辑上面,往往是配置、权限或者业务逻辑之外的地方(转)

    不能说所有的bug都是纸老虎,但往往那种看似很奇葩的bug,导致的原因确实很简单,烦了你一段时间,找到真相又让你忍不住一笑.什么是奇葩的bug呢.我的定义是:代码逻辑都一样,但在A处是好的,到了B处就 ...

  4. Ansible@一个有效的配置管理工具--Ansible configure management--翻译(四)

    不要未经书面许可转载 第三章是长,因为,我会分几个部分来翻译. Advanced Playbooks So far the playbooks that we have looked at are s ...

  5. iframe参数

    iframe参数: <iframe src="test.jsp" width="100″ height="50″ frameborder="no ...

  6. spring4.2完整web项目(使用html视图解析器)

    完整配置springmvc4,最终视图选择的是html,非静态文件. 最近自己配置spring的时候,遇到很多问题,由于开发环境和版本的变化导致网友们给出的建议很多还是不能用的,可能还会有很多人会遇到 ...

  7. C# mongodb 1

    转载C# mongodb 概述 MongoDB是一个高性能,开源,无模式的文档型数据库,使用C++开发.是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他 ...

  8. ThinkPHP框架设计与扩展总结

    详见:http://www.ucai.cn/blogdetail/7028?mid=1&f=5 可在线运行查看效果哦 导言:ThinkPHP框架是国内知名度很高应用很广泛的php框架,我们从一 ...

  9. c++中string类的具体解释

    通过在站点上的资料搜集,得到了非常多关于string类使用方法的文档,通过对这些资料的整理和增加一些自己的代码,就得出了一份比較完整的关于string类函数有哪些和如何用的文档了! 以下先罗列出str ...

  10. Codeforces Round #267 (Div. 2)D(DFS+单词hash+简单DP)

    D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input standard ...