Angularjs 与Ckeditor

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

学习网址:

我们在做B/S系统是经常会用到在线编辑器(FreeTextBox,Ckeditor,KindEditor等等),我比较常用的是kindEditor和ckEditor。

开始打算用kindEditor,

  1. mainApp.directive('kindeditor', function() {
  2. return {
  3. require : '?ngModel',
  4. link : function(scope, element, attrs, ngModel) {
  5. var editor;
  6. KindEditor.ready(function(K) {
  7. editor = K.create(element[0], {
  8. resizeType : 1,
  9. allowPreviewEmoticons : false,
  10. allowImageUpload : false,
  11. items : [
  12. 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
  13. 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
  14. 'insertunorderedlist', '|', 'emoticons', 'image', 'link']
  15. });
  16. });
  17. if (!ngModel) {
  18. return;
  19. }
  20. editor.on('instanceReady', function() {
  21. editor.setData(ngModel.$viewValue);
  22. });
  23. editor.on('pasteState', function() {
  24. scope.$apply(function() {
  25. ngModel.$setViewValue(editor.getData());
  26. });
  27. });
  28. ngModel.$render = function(value) {
  29. editor.setData(ngModel.$viewValue);
  30. };
  31. }
  32. };
  33. });

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

然后有使用了ckeditor写了一个指令

  1. /**
  2. * ckeditor Directive
  3. * @author 张世民 @ 数云图
  4. */
  5. mainApp.directive('ckeditor', function() {
  6. return {
  7. require : '?ngModel',
  8. link : function(scope, element, attrs, ngModel) {
  9. var ckeditor = CKEDITOR.replace(element[0], {
  10.  
  11. });
  12. if (!ngModel) {
  13. return;
  14. }
  15. ckeditor.on('pasteState', function() {
  16. scope.$apply(function() {
  17. ngModel.$setViewValue(ckeditor.getData());
  18. });
  19. });
  20. ngModel.$render = function(value) {
  21. ckeditor.setData(ngModel.$viewValue);
  22. };
  23. }
  24. };
  25. });

这样可以成功使用了。

但是在编辑时又发现问题了,在第二次编辑时没有执行

1
ckeditor.setData(ngModel.$viewValue);

又给ckeditor绑定了instanceReady事件,这样用起来比较完美了,最后ckeditor指令如下

  1. /**
  2. * ckeditor Directive
  3. * @author 张世民 @ 数云图
  4. */
  5. mainApp.directive('ckeditor', function() {
  6. return {
  7. require : '?ngModel',
  8. link : function(scope, element, attrs, ngModel) {
  9. var ckeditor = CKEDITOR.replace(element[0], {
  10.  
  11. });
  12. if (!ngModel) {
  13. return;
  14. }
  15. ckeditor.on('instanceReady', function() {
  16. ckeditor.setData(ngModel.$viewValue);
  17. });
  18. ckeditor.on('pasteState', function() {
  19. scope.$apply(function() {
  20. ngModel.$setViewValue(ckeditor.getData());
  21. });
  22. });
  23. ngModel.$render = function(value) {
  24. ckeditor.setData(ngModel.$viewValue);
  25. };
  26. }
  27. };
  28. });

用法简单,只需要在html标签上加入ckeditor 指令

  1. <textarea ckeditor ng-model="entity.catalog" class="form-control"></textarea>

补充:

几位朋友说Ueditor挺好用的,测试了一下,写了一个AngularJs的Ueditor指令

  1. mainApp.directive('ueditor', function() {
  2. return {
  3. require : '?ngModel',
  4. link : function(scope, element, attrs, ngModel) {
  5. var ueditor = UE.getEditor(element[0], {
  6. //配置
  7. });
  8. if (!ngModel) {
  9. return;
  10. }
  11. ueditor.on('instanceReady', function() {
  12. ueditor.setContent(ngModel.$viewValue);
  13. });
  14. ueditor.on('pasteState', function() {
  15. scope.$apply(function() {
  16. ngModel.$setViewValue(ueditor.getContent());
  17. });
  18. });
  19. ngModel.$render = function(value) {
  20. ueditor.setContent(ngModel.$viewValue);
  21. };
  22. }
  23. };
  24. });

用法只需在Html标签上加上ueditor指令

  1. <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. HTML基金会2----联系,像, 第,对齐

    ios讨论组1团:135718460 在web开发中.排版,布局非常重要,因此我们要把基础的东西打坚固,大家不要 慌,慢慢来. 直接把代码拿过去,直接就能够执行的. 1.标题 2.段落 3.HTML ...

  2. (大数据工程师学习路径)第一步 Linux 基础入门----目录结构及文件基本操作

    Linux 目录结构及文件基本操作 介绍 1.Linux 的文件组织目录结构. 2.相对路径和绝对路径. 3.对文件的移动.复制.重命名.编辑等操作. 一.Linux 目录结构 在讲 Linux 目录 ...

  3. 详细解释VB连接access几种方法数据库

    在VB中,连接ACCESS数据库的方法主要有以下三种 使用ADO对象,通过编写代码訪问数据库 Connection 对象 ODBC数据源 使用ADO Data 控件高速创建数据库连接 有三种连接方法 ...

  4. 什么是WEBserver? 经常使用的WEBserver有哪些?

    什么是WEBserver? 经常使用的WEBserver有哪些? 一.什么是WEBserver Webserver能够解析HTTP协议.当Webserver接收到一个HTTP请求,会返回一个HTTP响 ...

  5. poj2431 Expedition

    直接代码... #include<string.h> #include<stdio.h> #include<queue> #include<iostream& ...

  6. 设置韩澳大利亚sinox弄winxp清除字体和界面美观

    澳大利亚开始与汉sinox一直以为接口暗淡,字体比较模糊,否winxp光明,导致眼比较辛苦的眼睛.比方说,可能不那么黯淡刺眼,有益眼睛,但我不能忍受字体模糊.即使调整分辨率,,但是字体模糊还是没有改观 ...

  7. MVC 编程模型及其变种

    MVC 编程模型及其变种 MVC全称是Model View Controller, 这是一个模型(model)-查看(view)-调节器(controller)缩写,这是通过通用的编程模型非.MVC当 ...

  8. 删除句子UITableView额外的底线和切割线

    于viewDidLoad添加代码功能句子: self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 它可 ...

  9. Spring搭建MVC WEB项目[转]

    原文链接:http://blog.csdn.net/initphp/article/details/8208349 1.创建一个web项目 2.假设,我们已经安装完毕Spring所需要的依赖包,以及一 ...

  10. LinkedBlockingQueue多线程测试

    public class FillQueueThread extends Thread { private Queue queue; public FillQueueThread(Queue queu ...