解决kindeditor编辑器因为flash机制导致的图片批量上传按钮看不见的问题

最新推荐文章于 2023-06-04 12:40:59 发布

汪小君

最新推荐文章于 2023-06-04 12:40:59 发布

阅读量6.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：第三方文章标签： kindeditor

原文链接：https://bbs.youkuaiyun.com/topics/392422884

第三方专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种解决KindEditor在IE浏览器中上传图片时出现白色显示的问题。通过修改kindeditor-all.js文件中上传图片的object标签设置，实现上传按钮的正常显示。适用于使用KindEditor进行图片上传功能的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

附相关代码

不同的kindeditor代码行数不一定一致，自己搜索对比就行了

第一段大约在7861附近

/member/shop/setting/diy/static/kindeditor/plugins/multiimage/images/select-files-zh-CN.png
要注意这个静态资源路径，自己根据项目调整即可（select-files-zh-CN.png，注意这个文件名连接符，有的最后是zh_CN.png）

self.div = K(options.container).html([
			'<div class="ke-swfupload">',
			'<div class="ke-swfupload-top" style="position: relative">',
			'<div class="ke-inline-block ke-swfupload-button" style="position: absolute;z-index: 1000;opacity: 0;left: 0px;">',
			'<input type="button" value="Browse" />',
			'</div>',
			'<div style="height:23px;width:72px;float: left;background-image: url('+'/member/shop/setting/diy/static/kindeditor/plugins/multiimage/images/select-files-zh-CN.png'+')"></div>',
			'<div class="ke-inline-block ke-swfupload-desc">' + options.uploadDesc + '</div>',
			'<span class="ke-button-common ke-button-outer ke-swfupload-startupload">',
			'<input type="button" class="ke-button-common ke-button" value="' + options.startButtonValue + '" />',
			'</span>',
			'</div>',
			'<div class="ke-swfupload-body"></div>',
			'</div>'
		].join(''));

第二段，hack IE，大约在8369

return ['<object id="', this.movieName, '"' + classid + ' type="application/x-shockwave-flash" data="', this.settings.flash_url, '" width="', this.settings.button_width, '" height="', this.settings.button_height, '" class="swfupload">',
				'<param name="wmode" value="', this.settings.button_window_mode, '" />',
				'<param name="movie" value="', this.settings.flash_url, '" />',
				'<param name="quality" value="high" />',
				'<param name="menu" value="false" />',
				'<param name="allowScriptAccess" value="always" />',
				'<param name="flashvars" value="' + this.getFlashVars() + '" />',
				'<param name="wmode" value="transparent" />',
				'</object>'].join("");

附：如果有的项目用的min.js，就需要切换回all.js

最重要的就是尽早弃坑。

问题描述

因为flash机制导致浏览器里面默认上传按钮不显示在这里插入图片描述

解决方法如下

在他的kindeditor-all.js文件中，对上传图片的objcet标签的父标签的div设置了绝对定位，又重新做了一个按钮的div,把object标签的父标签div定位到我新做的按钮div上，设置object标签的父标签div的透明度opacity：0，如下图
在这里插入图片描述

在前台就显示出来了，但在IE浏览器下显示的是白色，如下图