1、首先去ckeditor的官网下载ckeditor包,http://ckeditor.com/download;

2、把ckeditor文件夹放入工程中(webapp文件夹下能访问到的都行)。

3、页面导入ckeditor.js,就导入这个文件即可。

4、使用Angular的directive配置ckeditor编辑器

/**ckEditor,因为这里定义了,所以在页面就无需定义一个新的ckeditor了,注意看浏览器控制台,
*如果页面用ckeditor官方的方法定义一个ckeditor,就会出错,说重复定义一个ckeditor*/
app.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);
};
}
};
});

5、然后在页面写上,即可进行双向绑定!!(切记到这里就行了,不要画蛇添足在途写其他的,不然会报错的!)

<textarea ckeditor ng-model="topic.content" class="form-control" name="content"></textarea>

说明:如果没用到AngularJS,不需要进行ng-model的双向绑定的话 。就不用写Angular的directive指令就去掉第四和第五步,其他不变加上下面的即可

<textarea ckeditor ng-model="topic.content" class="form-control" name="content"></textarea>

<!--经自己的测试,这段js代码一定要放到此<textarea>标签之后-->

<script type="text/javascript">
CKEDITOR.replace('content'); //参数‘content’是textarea元素的name属性值,而非id属性值
</script>

AngularJS+ckEditor管理ng-model的更多相关文章

  1. angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location

    参考: https://docs.angularjs.org/api/ng/service/$location

  2. jango 模型管理数据model,数据库外键主键与一对一,一对多,多对多关系

    四.models.py 定义和管理模型: 4.1模型class的属性就映射与数据库的字段参数 继承models.Model class TestClass(models.Model): 4.2在数据库 ...

  3. Angularjs checkbox的ng属性

    angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...

  4. 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"

    项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...

  5. 【转】AngularJs 弹出框 model(模态框)

    原文转至 http://blog.csdn.net/violet_day/article/details/17170585 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 ...

  6. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

  7. Angularjs 与Ckeditor

    Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块 ...

  8. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  9. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

随机推荐

  1. [Android Pro] ant 编译android工程

    参考文章: http://blog.csdn.net/xyz_lmn/article/details/7268582?reload http://hubingforever.blog.163.com/ ...

  2. vm 负责虚拟机出现“”适配器 的mac地址在保留地址范围内‘’

    我自己在windows中文件中,直接将一个虚拟机进行复制了一份,后用vm打开, 选择我已经移到,结果会出现了一下的情况, 导致了我无法ping 通,故我看到一下提示: 原来是我两台虚拟机的MaC ,即 ...

  3. java equals 和 "==" 比较

    java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean   他们之间的比较,应用双等号(== ...

  4. SecureCRT乱码

    http://jingyan.baidu.com/article/948f59245be128d80ff5f9aa.html

  5. 谈谈“色彩空间表示方法”——RGB、YUY2、YUYV、YVYU、UYVY、AYUV

    转自:http://bbs.chinavideo.org/viewthread.php?tid=4143 还可参考http://www.fourcc.org/yuv.php 小知识:RGB与YUV-- ...

  6. sql2005-数据库备份方案 (转载)

    sql2005数据库备份一般情况分为二种:一是手工备份.二是自动备份.以下是二种方法的步骤: 一.手工备份 打开数据库,选择要备份数据库,右键选择[任务]->[备份],打开备份数据库页面,在[源 ...

  7. Tomcat中的webapps中的web应用的文件结构

    可仿造Tomcat中的webapps下的已有web应用的例子 具体文件结构如下:

  8. 调整linux的时钟

    想把linux时钟调整的正常了. 网上找了找资料,找到了同步办法: http://blog.51yip.com/server/1474.html 即使用: sudo yum install ntp s ...

  9. jQuery Select操作大集合

    jQuery获取Select选择的Text和Value: 语法解释:  $("#select_id").change(function(){//code...});    //为S ...

  10. Mysql 解决left join 数据重复的问题

    select p.*,g.roleName,pg.srcType from t_gold_pay_add p left join gRole g on p.roleID=g.roleID left j ...