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. 于Unity3D调用安卓AlertDialog

    例如,下面的示例代码演示 package com.sample.sampletest; import android.app.AlertDialog; import android.content.D ...

  2. MVC中使用SignalR

    MVC中使用SignalR打造酷炫实用的即时通讯功能附源码   前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时 ...

  3. webserver实现

    最近的工作需求client和server使用https协议进行通讯,我负责client编写程序,在操作系统的-depth理解认为一旦前webserver实现,整理代码: #include"a ...

  4. 基于ORACLE建表和循环回路来创建数据库存储过程SQL语句来实现

    一个.概要 在实际的软件开发项目.我们经常会遇到需要创造更多的相同类型的数据库表或存储过程时,.例如.假设按照尾号点表的ID号,然后,你需要创建10用户信息表,的用户信息放在同一个表中. 对于类型同样 ...

  5. .net在arraylist用法

    1.什么是ArrayListArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本号,它提供了例如以下一些优点: 动态的添加和降低元素 实现了ICollection和IL ...

  6. C++ friend 用法汇总

    C++这位朋友同意之类的非公共成员的机制是一个类或函数访问,根据朋友的类型分为三种类型:一般非类成员函数为好友,类成员函数为好友.类为好友. 1 内容朋友 包括报表朋友的朋友以及朋友的定义.明默的感觉 ...

  7. Eclipse UML小工具AmaterasUML的配置和使用

    AmaterasUML是个人认为最好用的Eclipse UML插件,能够通过拖拽Java源文件,轻松生成类图结构.同一时候支持活动图.时序图和用例图. 它的官方下载地址是:http://sourcef ...

  8. 大数据系列修炼-Scala课程04

    Scala中继承实现:超类的构造.字段重写.方法重写 关于超类的构建:超类可以在子类没有位置的限制,可以在子类中调用父类的方法 类中字段重写:在重写字段前面加一个override就可以重新赋值 类中方 ...

  9. 关于”机器学习方法“,&quot;深度学习方法&quot;系列

    "机器学习/深度学习方法"系列,我本着开放与共享(open and share)的精神撰写,目的是让很多其它的人了解机器学习的概念,理解其原理,学会应用.如今网上各种技术类文章非常 ...

  10. [注意事项&amp;车轮]java源代码 产生局部javadoc api档

    随着Eclipse书写java码时间,有时候,因为我们不知道java函数返回.通过鼠标移动到java该功能,假设它javadoc相关内容将被显示. 但是,并非所有java代码javadoc:连装jav ...