ueditor-angular(百度编辑器angular版)中,关于插入图片后不操作,图片无法正常提交的问题;
2017-02-05 11:28
435 查看
由于项目后台管理页面中需要使用编辑器,所以选择了百度编辑器这个常用的东西;
本人是小白,第一次使用百度编辑器,具体的配置是由后台的兄弟完成的,还给了demo,所以在项目开发中也一直都没发现什么问题;
使用也很简单,
HTML中使用ng-model绑定某个变量,config绑定配置属性;
控制器中配置scope._Config
如此就能正常使用;
但是在测试阶段发现了一个问题:使用单张图片插入后,如果不在有任何操作,直接保存,再次浏览的时候会发现,图片变成loading图,而不是你上传成功的图片;
经过查找发现原因在于:使用单张图片上传时,编辑器会事先插入一张loading图,当上传成功后,使用JS直接修改loading图的src属性,使它指向已上传成功的图片,但是直接修改src这一操作并没有触发angular的digest,导致angular中的数据模型并没有得到更新,还是保存的loading图路径;
知道原因后,这时候就想了怎么在插入的图片上传完成后执行一次检测呢,也查了很多资料,试了很多方法:什么dom操作,什么提交前加空字符串,发现都没有用,后来在网站找到了一个治标不治本的方法:
给编辑器内容的监听事件添加一个延迟,保证在图片上传成功之后,在执行$apply,但是这方法有明显的缺陷,我无法确定图片上传完成的时间,所以还是有bug;
上面方法的参考网站:http://blog.csdn.net/u014788227/article/details/53443034
后来呢,想想也只能从图片上传的方法中来修改,才能保证不影响其他功能;
这是简单上传的部分代码,也是bug出现的地方,为什么上传图片的时候插入的loading可以被angluar检测到,那是不是在图片插入完成后,利用插入loading图的方法再插入一个空字符串,不改变数据又能让angular检测到呢?
所以如下,在ueditor-all.js中24533行代码添加
来触发angluar的脏值检测,然后就没有然后了,图片可以正常上传显示;
这种方法可能过于投机,对于网上那些什么修改控制器,添加服务的方法,真心看不懂,也没试成功,所以暂时先用着这种方法吧,以后有长进了再来参谋参谋;
本人是小白,第一次使用百度编辑器,具体的配置是由后台的兄弟完成的,还给了demo,所以在项目开发中也一直都没发现什么问题;
使用也很简单,
HTML中使用ng-model绑定某个变量,config绑定配置属性;
<div class="ueditor" ng-model="vm.formData.content" config="_Config" ></div>
控制器中配置scope._Config
$scope._Config = { // 工具按钮 配置编辑器上传的功能按钮 toolbars:[[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'custombackend', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'emotion', 'attachment', 'map', 'insertcode', 'pagebreak', 'template', '|', 'horizontal', 'date', 'time', 'spechars', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'drafts', 'help' ]], serverUrl : baseUrl + '/Api/Ueditor/', // 不抓取远程图片 catchRemoteImageEnable: false }
如此就能正常使用;
但是在测试阶段发现了一个问题:使用单张图片插入后,如果不在有任何操作,直接保存,再次浏览的时候会发现,图片变成loading图,而不是你上传成功的图片;
经过查找发现原因在于:使用单张图片上传时,编辑器会事先插入一张loading图,当上传成功后,使用JS直接修改loading图的src属性,使它指向已上传成功的图片,但是直接修改src这一操作并没有触发angular的digest,导致angular中的数据模型并没有得到更新,还是保存的loading图路径;
知道原因后,这时候就想了怎么在插入的图片上传完成后执行一次检测呢,也查了很多资料,试了很多方法:什么dom操作,什么提交前加空字符串,发现都没有用,后来在网站找到了一个治标不治本的方法:
给编辑器内容的监听事件添加一个延迟,保证在图片上传成功之后,在执行$apply,但是这方法有明显的缺陷,我无法确定图片上传完成的时间,所以还是有bug;
上面方法的参考网站:http://blog.csdn.net/u014788227/article/details/53443034
后来呢,想想也只能从图片上传的方法中来修改,才能保证不影响其他功能;
这是简单上传的部分代码,也是bug出现的地方,为什么上传图片的时候插入的loading可以被angluar检测到,那是不是在图片插入完成后,利用插入loading图的方法再插入一个空字符串,不改变数据又能让angular检测到呢?
所以如下,在ueditor-all.js中24533行代码添加
me.execCommand('inserthtml', '');
来触发angluar的脏值检测,然后就没有然后了,图片可以正常上传显示;
这种方法可能过于投机,对于网上那些什么修改控制器,添加服务的方法,真心看不懂,也没试成功,所以暂时先用着这种方法吧,以后有长进了再来参谋参谋;
相关文章推荐
- Django后台开发笔记①:关于DjangoUeditor与python3存在兼容性问题的解决方案(即解决图片无法上传问题)
- 百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题,点击上传图片弹窗打开慢问题
- 关于 百度 Ueditor (在chrome浏览器) 上传图片时 打开文件夹的延迟问题
- 关于百度Ueditor的图片配置问题以及初步体验
- 关于百度world 编辑器改变上传图片的保存路径图片不显示的问题
- 百度编辑器(ueditor)踩坑,图片转存无法使用
- 百度编辑器 多图片批量上传 顺序混乱问题 ueditor
- 关于ueditor编辑器插件的使用记录 --- 解决"后端配置项没有正常加载,上传插件不能正常使用"上传图片处的问题
- 关于百度ueditor图片上传到OSS问题解决
- 关于 百度 Ueditor 上传图片时 打开文件夹的延迟问题
- 百度编辑器 多图片批量上传 顺序混乱问题 ueditor
- 关于jquery操作iframe中内容, 无法正常显示的问题
- 关于“插入图片”等功能无法使用的问题
- 关于使用ueditor编辑器--ueditor文件夹与编辑器初始化页面不在同一目录下,上传图片显示问题
- 百度UEditor插入图片尺寸自动适应编辑框大小问题
- 百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题,点击上传图片弹窗打开慢问题
- 【ASP.NET】10.解决百度富文本编辑器UEditor本地上传图片正常,放到服务器上以后图片上传按钮变灰不能点击的问题
- 关于无法显示该网页,弹出对话框显示"Internet Explorer无法打开Internet站点xxx,已终止操作"问题的解决方法
- Asp.net2.0部署时TreeView控件无法正常显示没有图片的问题
- 关于从GridView表中导出数据到Excel表中,身份证或者长度过长的数据在Excel中无法正常显示的问题