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>