作法一:ajax
angularJs+ckeditorapp
1、页面post
<textarea ckeditor required name="topicContent" ng-model="topic.body" rows="20" class="form-control col-md-8 ecp-post-content" name="content"></textarea>ui
2、指令spa
app.directive('ckeditor', function() {
return {
require : '?ngModel',
link : function(scope, element, attrs, ngModel) {
var ckeditor = CKEDITOR.replace(element[0], {orm
});
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);
};
}
};
});图片
这样就可使用了,可是这样有个bug,若是上传图片以后,后面不加而后字符那张图片的标签就不会被保存,由于图片上传成功后,图片的标签是ckeditor添加的,并非经过咱们的键盘或鼠标去操做的,ip
因此这样ng-model就不会去执行脏检查,若是咱们的图片是复制粘贴到上面的,就会被检查到,ps:这里并非真的指最后一张图片,而是指ckeditor自动添加标签(好比图片上传成功以后它会自动添加该图片的img标签)以后,若是咱们没有输入,则ng-model(ng-model是自动执行脏检查的!)的脏检查是检查不出来的(这里的原来具体还不清楚)element
因此我最后换成了作法二,页面使用的逻辑所有不变,只是文本编辑框不是经过ng-model去取值了,而是根据官网上的根据js/jQuery去取值get
作法2、
1、页面
<textarea required name="topicContent" ng-model="topic.body" rows="20" class="ckeditor form-control col-md-8 ecp-post-content" name="content"></textarea>
<script>
CKEDITOR.replace("content");//这里要和name属性值一致
</script>
2、js取值
ajax提交前(angularJs就是$http提交以前)
//须要手动更新CKEDITOR字段
for ( instance in CKEDITOR.instances ){
CKEDITOR.instances[instance].updateElement();
}
而后经过
$("textarea[name='content']").val();来取值便可!!!
用方法二的方法,就解决掉了ng-model没法脏检查ckeditor自动添加标签的bug了(虽然是个笨方法,可是问题仍是解决了!)