跨浏览器兼容性测试中，KindEditor如何处理WORD图片粘贴？

2023年X月X日 晴转多云（开发日志）

今天又是和代码“斗智斗勇”的一天！作为湖南某高校计算机专业的大二学生，我最近在搞一个“CMS系统大改造”——目标是让Word里的图片一键转存到服务器，还能在编辑器里保留文档样式，连表格、字体、公式这些“细节控”都要照顾到。更狠的是，我还想支持Excel、PPT、PDF导入，简直是在给自己挖“技术深坑”。

上午：疯狂“白嫖”免费组件

早上一睁眼，我就打开了GitHub和CSDN，开始“全网搜刮”免费组件。我的需求很明确：

1. 前端：Vue2 + KindEditor 4（虽然老，但老板（自己）要求用）
2. 后端：ASP.NET WebForm（老古董，但学校教的就是这个）
3. 云存储：阿里云OSS（毕竟白嫖了学生优惠）
4. 文档解析：重点！要能解析Word/Excel/PPT/PDF，提取图片和样式。

结果，我发现了几个“宝藏”：

• Docx.js：能解析Word文档，但Excel和PPT得另找。
• SheetJS：处理Excel还行，但PPT和PDF又得换库。
• PDF.js：Mozilla的开源库，解析PDF不错，但图片转存得自己写逻辑。
• Mammoth.js：专门提取Word样式，但表格和图片处理有点鸡肋。

最搞笑的是，我试了一个叫“OfficeToHTML”的组件，结果它把Word转成HTML后，表格全乱了，字体大小也变了，仿佛在告诉我：“年轻人，别做梦了，样式保留是不可能的。”（气得我差点摔键盘，但想到是租的电脑，又默默放下了……）

下午：和KindEditor“斗法”

KindEditor 4是个老编辑器了，文档少得可怜。我想让它支持图片自动上传到OSS，结果发现：

• 原生不支持拖拽上传，得自己监听paste事件。
• 上传后得手动插入图片URL，还得保留原始样式（比如宽度、对齐方式）。
• 最坑的是，Word里的图片是base64编码的，直接传会炸服务器，得先转成Blob再上传。

于是，我写了一段“魔改”代码：

// 监听粘贴事件，过滤Word图片editor.on('paste',function(e){constclipboardData=e.clipboardData||window.clipboardData;constitems=clipboardData.items;for(leti=0;i<items.length;i++){if(items[i].type.indexOf('image')!==-1){constblob=items[i].getAsFile();uploadToOSS(blob).then(url=>{editor.insertHtml(``);});}}});

结果，测试时发现图片上传成功了，但样式全没了！原来KindEditor会默认给图片加max-width:100%，把Word里的原始宽度覆盖了。于是，我又改成了：

// 从Word的HTML里提取style属性constwordHtml=clipboardData.getData('text/html');constimgTag=wordHtml.match(/]+>/g)[0];conststyle=imgTag.match(/style="([^"]+)"/);if(style){editor.insertHtml(``);}

终于，图片上传后样式保留了！我差点感动哭，结果发现表格还没处理……（明天继续哭）

晚上：和ASP.NET WebForm“相爱相杀”

后端用ASP.NET WebForm，接收前端传的Blob数据时，发现：

• Request.Files在WebForm里是HttpFileCollection，但前端传的是FormData，得用Request.InputStream手动解析。
• 阿里云OSS的SDK是.NET Core的，WebForm得用旧版SDK，配置起来像在解谜。

最后，我写了一个“土味”上传接口：

// 接收Blob数据并上传OSS[HttpPost]publicstringUploadImage(){Streamstream=Request.InputStream;byte[]buffer=newbyte[stream.Length];stream.Read(buffer,0,buffer.Length);// 阿里云OSS配置（省略N行代码）OSSClientclient=newOSSClient(endpoint,accessKeyId,accessKeySecret);PutObjectRequestrequest=newPutObjectRequest(bucketName,objectKey,newMemoryStream(buffer));client.PutObject(request);return$"https://{bucketName}.{endpoint}/{objectKey}";}

测试时，前端传了个10MB的PPT图片，结果WebForm默认限制请求大小为4MB，直接报错400。于是，我又去改web.config：

终于，图片上传成功了！但Excel和PPT的样式保留还没搞定……（明天继续肝）

结尾：加入“同行交流群”

今天在CSDN看到有人发了个QQ群：“CMS开发交流群（群号：223813913）”，说是能讨论Word转存、样式保留这些“高难度操作”。我火速加入，结果发现群里全是大佬，有人用Python+Django搞，有人用Java+Spring Boot，就我一个用ASP.NET WebForm的“古董选手”。不过，大家都很热情，还分享了几个免费组件的链接，比如：

• Apache POI：处理Office文档（Java版，但可以借鉴思路）
• Spire.Doc：商业库，但有免费版（功能受限）
• iTextSharp：处理PDF（老牌库，但文档难懂）

明天继续测试这些组件，争取把Excel和PPT的样式保留也搞定！如果成功了，我一定来群里发红包！（虽然穷，但气势不能输！）

今日总结：

• 进度：Word图片上传+样式保留（部分成功）
• 坑点：KindEditor样式覆盖、WebForm请求大小限制
• 心情：像在玩“技术版密室逃脱”，但解谜成功后超爽！

PS：如果有人也在搞类似项目，欢迎加群交流！群号：223813913，暗号：“Word图片转存”。（说不定还能找到队友一起肝毕业设计呢！）

上传工具栏插件文件夹

上传插件文件夹

控件初始化

在head中引入组件文件
注意，不要重复引入jquery，如果您的页面已经引入了jquery这里就不要再引入jquery 1.4了。

WordPaster For KindEditor-4.x # 初始化组件 WordPaster.getInstance({ui:{render:"wdpst"}//目标容器，一般为div});

设置快捷键

将插件添加到工具栏，并挂载KindEditor的Ctrl+V快捷键事件

注意

1.如果接口字段名称不是file，请配置FileFieldName。

点击查看教程
2.如果接口返回JSON，请配置ImageMatch

点击查看教程

3.如果接口返回的图片地址没有域名，请配置ImageUrl

点击查看教程

整合效果

效果

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

示例下载

下载完整示例