做法一:

  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. .NET方向高级开发人员面试时应该事先考虑的问题

    (澄清一下,我发帖的目的不是用来专门给人评价这些问题的好坏的,实际上我所在 的公司就考察这些问题.而能够基本上答出来的可以说百里挑一.如果各位觉得这些问题很简单,那么基本上在.NET面试环节就没有什么 ...

  2. Spring.Net Remoting 相关使用

    http://www.cnblogs.com/GoodHelper/archive/2009/11/19/SpringNet_Remoting.html  本博客系统转载  原文为 Spring.Se ...

  3. MFC 设置控件事件对应的函数

    在项目中,右击你想设置的控件,打开属性. 然后找到:控件事件,如果在Visual Studio 2015中操作,显示如图: 然后,以设定单击事件为例: 点击右边的三角,选择 <Edit Code ...

  4. Singleton模式——对象创建型模式

    Singleton模式即为单例模式/单件模式. (一)意图--保证一个类仅有一个实例,并提供一个访问它的全局访问点. 如一台计算机可以有多个端口,但是应该统一管理这些端口,避免访问冲突.--选择Sin ...

  5. Tomcat在局域网中localhost可以访问,但是无法通过本地ip访问,127.0.0.1也无法访问问题的解决方法

    环境:Tomcat6,Windows Server2008 R2, Tomcat使用默认端口8080. 在BO服务器上使用Tomcat6作为WEB服务器,在服务器本地使用http://localhos ...

  6. Storm DRPC实现机制分析

    DRPC是建立在Storm基本概念(Topology.Spout.Bolt.Stream等)之上的高层抽象,个人理解它的目标是在Storm 集群之上提供一种分布式的RPC框架,以便能够利用Storm快 ...

  7. 推荐两款PC健康小软件

    一.前言 对于经常需要坐在电脑前工作一整天的人来说,健康问题是不得不关注的.下面推荐我一直在用的两款体积非常小(几百KB)的健康小软件,也许可以在无形中保护你.提醒你. 1. FadeTop 这是一款 ...

  8. UVA 11427 (概率DP+期望)

    题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=35396 题目大意:每晚打游戏.每晚中,赢一局概率p,最多玩n局, ...

  9. [知识点]网络流之Edmond-Karp算法

    // 此博文为迁移而来,写于2015年2月2日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vr12.html     ...

  10. 【POJ3461】Olipo

    Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...