做法一:

  angularJs+ckeditor

一、页面

  <textarea ckeditor required name="topicContent" ng-model="topic.body" rows="20" class="form-control col-md-8 ecp-post-content" name="content"></textarea>

二、指令

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);
};
}
};
});

这样就可以使用了,但是这样有个bug,如果上传图片之后,后面不加然后字符那张图片的标签就不会被保存,因为图片上传成功后,图片的标签是ckeditor添加的,并不是通过我们的键盘或鼠标去操作的,

所以这样ng-model就不会去执行脏检查,如果我们的图片是复制粘贴到上面的,就会被检查到,ps:这里并不是真的指最后一张图片,而是指ckeditor自动添加标签(比如图片上传成功之后它会自动添加该图片的img标签)之后,如果我们没有输入,则ng-model(ng-model是自动执行脏检查的!)的脏检查是检查不出来的(这里的原来具体还不清楚)

所以我最后换成了做法二,页面使用的逻辑全部不变,只是文本编辑框不是通过ng-model去取值了,而是根据官网上的根据js/jQuery去取值

做法二、

一、页面

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

二、js取值

ajax提交前(angularJs就是$http提交之前)

  //需要手动更新CKEDITOR字段
     for ( instance in CKEDITOR.instances ){ 
       CKEDITOR.instances[instance].updateElement(); 
     }

然后通过

$("textarea[name='content']").val();来取值即可!!!

用方法二的方法,就解决掉了ng-model无法脏检查ckeditor自动添加标签的bug了(虽然是个笨方法,但是问题还是解决了!)

angular+ckeditor最后上传的最后一张图片不会被添加(bug)的更多相关文章

  1. springMVC和ckeditor图片上传

    springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...

  2. Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

  3. 把上传过来的多张图片拼接转为PDF的实现代码

    以下是把上传过来的多张图片拼接转为PDF的实现代码,不在本地存储上传上来的图片,下面是2中做法,推荐第一种,把pdf直接存储到DB中比较安全. 如果需要在服务器上存储客户端上传的文件时,切记存储文件时 ...

  4. ruby -- 进阶学习(五)使用Ckeditor插件上传中文图片

    基于rails4.0环境 当使用Ckeditor上传中文命名图片时报错,解决方法是对图片进行重命名 在Ckeditor插件的安装目录下找到controllers/.../application.rb ...

  5. angular form-data文件上传

    前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传 ...

  6. CKEditor 图片上传

    可以做如下配置: CKEDITOR.replace('editor1',{ filebrowserBrowseUrl:'/browser/browse.php', filebrowserUploadU ...

  7. 简单2步实现 asp.net mvc ckeditor 图片上传

    1.打开ckeditor 包下的  config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...

  8. .net core CKEditor 图片上传

    最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...

  9. C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”

    重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...

随机推荐

  1. 20145223《Java程序程序设计》第2周学习总结

    20145223 <Java程序设计>第2周学习总结 教材学习内容总结 一: 1.基本的类型: (1)整数:short(2字节).int(4字节).long(8字节) (2)字节 byte ...

  2. Codeforces Edu3 E. Minimum spanning tree for each edge

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  3. 解决js(ajax)提交后端的“ _xsrf' argument missing from POST” 的错误

    首先先简述一下CSRF: CSRF是Cross Site Request Forgery的缩写(也缩写为XSRF),直译过来就是跨站请求伪造的意思,也就是在用户会话下对某个CGI做一些GET/POST ...

  4. Shell 编程基础之 While 练习

    一.语法 while [ condition ] # 当 condition 条件成立时,就进行循环,直到条件不成立停止 do #执行内容 done 二.练习 输入用户输入的参数,直到用户输入 &qu ...

  5. 【Oralce】时间操作

    加法 select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate,1 ...

  6. 使用Adobe Edge Inspect在各种设备中轻松测试同一页面

    有过移动网站开发经历的开发者都知道,在各种设备中测试同一页面是一项非常繁琐的工作.现在,我们可以使用Adobe Edge Inspect来简化这一工作.如果使用Edge Inspect,可以在各种设备 ...

  7. topcoder SRM 618 DIV2 WritingWords

    只需要对word遍历一遍即可 int write(string word) { ; ; i < word.length(); ++ i){ cnt+=word[i]-; } return cnt ...

  8. 【BZOJ3122】【SDoi2013】随机数生成器

    Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数.   接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. ...

  9. 使用 Eclipse C/C++ Development Toolkit 开发应用程序

    使用 Eclipse C/C++ Development Toolkit 开发应用程序 (转) 来自http://blog.csdn.net/favory/article/details/189080 ...

  10. winform中键盘和鼠标事件的捕捉和重写(转)

    在 编写winform应用程序时,有时需要无论在哪个控件获取焦点时,对某一个键盘输入或者鼠标事件都进行同样的操作.比如编写一个处理图片的应用程序时, 希望无论当前哪个控件获得焦点,当用户按上.下.左. ...