AngularJS+ckEditor管理ng-model

一、首先去ckeditor的官网下载ckeditor包，http://ckeditor.com/download；

二、把ckeditor文件夹放入工程中（webapp文件夹下能访问到的都行）。

三、页面导入ckeditor.js，就导入这个文件便可。

四、使用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);
};
}
};
});

五、而后在页面写上，便可进行双向绑定！！（切记到这里就好了，不要多此一举在途写其余的，否则会报错的！）

<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>