微擎ueditor编辑器图片批量上传顺序混乱的解决方法

上周六有客户反映刚上线的商城管理系统在商品详情页批量上传图片的时候出现图片显示顺序与上传顺序不一致的问题,经排查,发现是编辑器在上传时是按上传完成的顺序插入图片的,即先传完先显示,在网上查了一下,发现很多人都有遇到这个问题,初步认为是ueditor编辑器的bug,于是按照网上的方法去解决,但都没有解决问题,调试查找之后发现网上的解决方法根本不适合微擎的多图上传,因为涉及的文件都没有被调用。。。。无奈只好自己查找,在和同事查找了将近一天之后终于找到了两个相关文件,然后又花了些功夫,最后总算是弄好了,想起来仍心有余悸,接下来把要修改的文件和方法放出来,有需要的可以参考。

web\resource\component\fileuploader\fileuploader.min.js

在图中所示位置添加红框中的代码,核心代码是这两句:

                  let aa=  a.id.split(‘WU_FILE_‘);

                    b.key = Number(aa[1]);

web\resource\js\app\util.js

在图中所示位置添加红框中的代码,核心代码是这几句:

                                       let newArr = JSON.parse(JSON.stringify(b));

                                        for(var i=0; i<b.length; i++){
                                            newArr.splice(b[i][‘key‘],1,b[i]);
                                        }

                                        b = newArr;

至此就修改完成了,该模块是改写的上传模块,与ueditor并不一致,所以请不要用ueditor的修改方法去修改

原文地址:https://www.cnblogs.com/yite/p/12161370.html

时间: 2024-10-08 19:00:28

微擎ueditor编辑器图片批量上传顺序混乱的解决方法的相关文章

百度编辑器 多图片批量上传 顺序混乱问题 ueditor

前言 ueditor的介绍我就不多说了,大家可直接访问 http://ueditor.baidu.com/website/index.html 正文 问题: ueditor在进行多图上传时,会出现图片书序错乱的问题. 原因: ueditor自从1.4.2版以后,前端上传模块统一改用webuploader,而webuploader是多线程上传的,ueditor对"uploadSuccess"的处理是上传成功一张,就加入到数组中,这样如果图片上传完成顺序是乱的,最终加入文本框的顺序也乱了.

将UEditor的图片批量上传抠出来单独使用

在Web项目中,经常有这样一个需求,就是对图片的批量上传,利用form表单的file可以实现图片的上传,但是用户体验不好,而且不支持ajax提交,网上也有很多图片上传插件,有基于javascript的,也有基于flash的,但是给我的感觉,要么用户体验不好,要么收费的,那么能不能有一个比较好的方案呢?那就是Ueditor! UEditor是百度出品的一款富文本编辑器,里面也集成了一个基于Flash的图片上传插件,由于Ueditor是开源的,所以源代码很容易得到,经过我的一番研究,找到了它的图片上

KindEditor图片批量上传

KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONObject obj = new JSONObject(); obj.put("error", 0);//0:上传文件成功,1:上传文件失败 obj.put("url", "这里是图片路径,多张图采用英文逗号分隔“,”"); 代码示例: /** * 文件

onethink框架 编辑器图片没有上传权限

昨天遇到了一个有点蛋疼的问题,创建了一个用户,但是在添加数据的时候,发现编辑器中的图片上传不能使用老是提示下图的那种提示: 然后自己一直在想,怎么编辑器还要图片上传权限呢,淡淡的忧伤啊.然后自己琢磨了一会,发现自己解决不了.立马到Q群中询问,一问,还真的搞定了.原来是要设置权限,不过这个权限是框架数据中早就有了,我们只需要勾选上就可以了.当然了,我这种情况只适用于直接在框架demo上扩展使用的项目,如果完全是自己编写的,那就要看你们各自的构建是咋样的啦.废话不多说,上图:这下子清净了,搞定,再也

多图片批量上传

零.  前言 网上多数图片批量上传代码老旧不全, 遂成次文, 以节省博友时间 一.  代码实例 前端代码(使用 HTML5 multiple属性来支持多图片批量上传): <form action="" enctype='multipart/form-data' method="post"> <div class="form-item"> <label>上传图片</label> <input t

asp.net+swfupload 多图片批量上传(附源码下载)

asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教程所使用的flash上传文件是 swfupload,下面会有源码下载链接. 使用工具 vs 2010. 演示效果图 第一步 新建一个web项目 第二步 引入所需swfuplod文件(swfupload.swf,js,css等) 第三步 新建一个一般处理程序(upload.ashx) upload.a

SSM配置Ueditor实现图片的上传&lt;一&gt;

最近想学点新的东西,于是琢磨着用SSM整合Ueditor来实现图片的上传!至于为什么选Ueditor,道理你懂得啦!百度开发的而且开源,能自定义自己想要的内容,版本更新什么的也比较勤快!接下来我准备记录下探索的过程! 1.下载 点击跳转到Ueditor下载界面 你可以到上面的地址下载Ueditor插件,选择UTF-8编码的Jsp版本. 2.构建工程 新建一个Maven工程,首先把ssm框架的基本的东西搭建好,如果你不清楚ssm基本框架,我博客里面有详细的搭建过程可以参考!在这我就直接上图了! 3

如何利用”七牛云”在UEditor实现图片的上传和浏览

在学习之前,我参考了朋友些的一篇关于这个功能实现的文章,非常不错.大家可以参考:http://www.cnblogs.com/John-Marnoon/p/5818528.html#3501846 里面都写了具体的实现,我也是参照朋友的文章来操作的.现在我重新整理一下实现的步骤: 1 . 注册一个七牛云用户 2.  在七牛云网站中创建一个空间来存储图片,存储区域选择 华东或是 华北,请先记得上传到华东1区的域名为up.qiniu.com.up-z0.qiniu.com和upload.qiniu.

初试“七牛云”--零基础运用七牛云配合UEditor实现图片的上传和浏览(.NET篇)

(注册和建立存储空间就不介绍了,网上一把一把的资料,自己试着点点也能明白) 作为一个成熟的菜鸟,如果遇到一个新问题,第一步当然是先百度一下... 看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了一部分,但是不系统,理解的不连贯,作为一个凡是要弄个特别明白的死脑筋,于是开始从头看是研究文档....(以下都是来自http://developer.qiniu.com/article/index.html#quickstart,经过个人精简,如有不明,详情请参阅文档) 先弄明白原理,才能更好的看懂