angular+ckeditor最后上传的最后一张图片不会被添加(bug)
做法一:
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)的更多相关文章
- springMVC和ckeditor图片上传
springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- 把上传过来的多张图片拼接转为PDF的实现代码
以下是把上传过来的多张图片拼接转为PDF的实现代码,不在本地存储上传上来的图片,下面是2中做法,推荐第一种,把pdf直接存储到DB中比较安全. 如果需要在服务器上存储客户端上传的文件时,切记存储文件时 ...
- ruby -- 进阶学习(五)使用Ckeditor插件上传中文图片
基于rails4.0环境 当使用Ckeditor上传中文命名图片时报错,解决方法是对图片进行重命名 在Ckeditor插件的安装目录下找到controllers/.../application.rb ...
- angular form-data文件上传
前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传 ...
- CKEditor 图片上传
可以做如下配置: CKEDITOR.replace('editor1',{ filebrowserBrowseUrl:'/browser/browse.php', filebrowserUploadU ...
- 简单2步实现 asp.net mvc ckeditor 图片上传
1.打开ckeditor 包下的 config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...
- .net core CKEditor 图片上传
最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...
- C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”
重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...
随机推荐
- asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例
无论你用什么语言,正则表达式的处理方法都是非常灵活.高效的,尤其是对某些字符串的抓取.过滤方面,更显其优势. 正则表达式的写法通常比较简单,几行短代码便能轻松完成看似很复杂的事情,更值得称赞的是,它的 ...
- 转 Delphi中使用FastMM4结合View CPU避免内存泄漏
http://www.cnblogs.com/kongchao/archive/2009/10/27/1590479.html 核心提示:内存泄漏经常出现在本地代码中,特别是多线程和发生异常的情况下, ...
- HBase 学习笔记
1. HBase 的特点 1.线性扩展,自动分表 region的自动分裂以及master的balance 增加datanode机器即可增加容量 增加regionserver机器即可增加读写吞吐量 2. ...
- MFC listcontrol 分列 添加行数据 点击列头排序
适用于 对话框程序 1.在工具箱中拖出 ListControl,然后右键-属性,view-Report 让你的ListControl变成这幅模样! 2.添加ListControl控件的control类 ...
- HTML5中createPattern()
定义和用法 createPattern() 方法在指定的方向内重复指定的元素. 元素可以是图片.视频,或者其他 <canvas> 元素. 被重复的元素可用于绘制/填充矩形.圆形或线条等等. ...
- BZOJ3566 : [SHOI2014]概率充电器
选个根把无根树转化成有根树, 设f[i]表示i不通电的概率 则 答案为对于枚举树根root进行DP后1-f[root]的和 直接算是O(n^2)的,但是n有500000,所以不能过. 对于这样一棵以1 ...
- MyIsam和InnoDB的区别
个人见解: 1.最主要的差别就是Innodb 支持事务处理与外键和行级锁.而MyISAM不支持 所以有用到事务处理和外键的,要用Innodb 2. InnoDB 中不保存表的具体行数,也就是说,执行s ...
- 限制Boltzmann机(Restricted Boltzmann Machine)
起源:Boltzmann神经网络 Boltzmann神经网络的结构是由Hopfield递归神经网络改良过来的,Hopfield中引入了统计物理学的能量函数的概念. 即,cost函数由统计物理学的能量函 ...
- 一道常被人轻视的前端JS面试题(转)
分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过 ...
- Thymeleaf学习内容
Thymeleaf Page Layouts Spring MVC and Thymeleaf: how to access data from templates thymeleaf-layout- ...