当前位置：首页 > news >正文

信创环境下UEDITOR是否支持国产WPS文档转存？

news 2026/5/12 17:09:14

【开发日记：Word图片一键转存大作战——从“秃头警告”到“真香现场”】
2023年X月X日周X 晴（但我的头顶在下雨）

第一章：需求诞生——甲方爸爸的“五彩斑斓黑”

今天导师突然发来一个“小需求”：给我的CMS系统后台新闻编辑器加个按钮，支持Word/Excel/PPT/PDF粘贴导入，图片自动上传到阿里云OSS，还要保留文档样式（字体、表格、公式、形状……连颜色都要一模一样！）。
我盯着屏幕陷入了沉思：这哪是需求，这是让我用Vue2 + KindEditor + ASP.NET WebForm“复活”一个Office全家桶啊！
（导师补刀：“预算99元，但可以请你喝冰阔落。”）

第二章：开源寻宝——GitHub上的“海王”之旅

打开GitHub，我仿佛成了“海王”，在茫茫开源库中疯狂撒网：

KindEditor插件：官方文档说支持图片上传，但Word粘贴？不存在的。
Mammoth.js：能提取Word内容，但样式全丢，表格变“面条”，公式变“乱码”。
Pandoc：功能强大，但后端集成要装一堆依赖，我的阿里云ECS服务器表示：“你礼貌吗？”
WordPaster：终于找到个支持KindEditor的插件！但一看价格——99人民币/年（我预算才9元人民币啊喂！）。

就在我即将放弃时，突然刷到一个**“WordToKindEditor”**的开源项目（链接：https://github.com/poor-dev/word-to-kindeditor），作者自称“穷学生”，功能简陋但免费！
“这不就是我吗？！”我激动得差点把奶茶泼到键盘上。

第三章：开发实录——和KindEditor的“相爱相杀”

Day1：前端改造——给KindEditor加按钮

KindEditor的文档比我的课本还薄，但凭借“玄学调试法”，我成功在工具栏加了个“Word导入”按钮：

// config.jsKindEditor.ready(function(K){K.create('#editor',{items:['fontname','fontsize','|','forecolor','hilitecolor','|','wordpaste'// 我的自定义按钮],afterCreate:function(){this.loadPlugin('wordpaste',function(){this.wordpaste.setUrl('/api/upload');// 指向后端接口});}});});

问题：按钮加上了，但点击没反应。
解决：发现需要手动引入插件文件，于是把项目里的wordpaste.js塞进KindEditor的plugins/文件夹，世界终于安静了。

Day2：后端搏斗——ASP.NET WebForm的“上古魔法”

前端传来的文件是multipart/form-data，但ASP.NET WebForm的Request.Files死活读不到！
错误代码：

// UploadHandler.ashxpublicvoidProcessRequest(HttpContextcontext){HttpPostedFilefile=context.Request.Files["file"];// 返回null！context.Response.Write("文件呢？！");}

解决方案：
原来WebForm需要加enctype="multipart/form-data"，但前端是AJAX上传，得用FormData对象：

// 前端上传代码constformData=newFormData();formData.append('file',file);// file是用户选择的Word文件fetch('/api/upload',{method:'POST',body:formData});

后端改用HttpContext.Current.Request.Files，终于抓到文件了！

Day3：阿里云OSS——从“403拒绝”到“真香”

图片上传到OSS需要签名，我照着官方SDK写了一段“加密魔法”：

// 生成OSS签名publicstringGetOssPolicy(){varpolicy=newPolicy{Expiration=DateTime.Now.AddHours(1),Conditions=newList{newCondition{Bucket="your-bucket"},newCondition{Key="${filename}"}}};returnEncodePolicy(policy);// 返回Base64加密后的字符串}

悲剧：上传时返回403错误，提示“签名不匹配”。
原因：OSS的SDK版本太旧，和我的.NET Framework不兼容！
解决：换用OSS .NET SDK for .NET Core（虽然我的项目是WebForm，但通过System.Runtime.Loader强行加载，居然成功了！）。

第四章：最终成果——导师的“真香”现场

经过3天熬夜，系统终于能：

点击“Word导入”按钮，粘贴或上传Word/Excel/PPT/PDF。
图片自动上传到阿里云OSS，返回URL插入编辑器。
保留文档样式（表格、字体、颜色、公式……连PPT里的“艺术字”都活过来了！）。

导师测试后沉默了5秒，然后说：
“这99元预算，好像能给你买杯奶茶？”
我：“不，我要加两根烤肠！”

第五章：开源互助——QQ群里的“技术扶贫”

开发中遇到的问题都在QQ群223813913里解决了，感谢群友的“远程手把手教学”：

@前端大佬：教我如何用Vue2监听KindEditor的粘贴事件。
@后端战神：分享了ASP.NET WebForm处理大文件上传的“黑科技”。
@阿里云OSS专家：直接甩给我一段可用的签名代码（省了2小时调试时间！）。

总结：

预算99元：买了3杯奶茶+2根烤肠，开发全靠开源和群友。
技术栈：Vue2 + KindEditor + ASP.NET WebForm + SQL Server + 阿里云OSS。
感悟：
“开源的力量，能让一个穷学生用奶茶钱复活Office全家桶！”

（P.S. 项目代码已上传GitHub，欢迎白嫖：https://github.com/your-name/cms-word-import）

—— 完 ——
（今日步数：500步，主要在宿舍和实验室之间“灵魂漂移”）

复制插件目录

引入插件文件

UEditor 1.4.3.3示例

注意：不要重复引入jquery，如果您的项目已经引入了jq，则不用再引入jq-1.4

在工具栏中增加插件按钮

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义toolbars:[["fullscreen","source","|","zycapture","|","wordpaster","importwordtoimg","netpaster","wordimport","excelimport","pptimport","pdfimport","|","importword","exportword","importpdf"]]

初始化控件

varpos=window.location.href.lastIndexOf("/");varapi=[window.location.href.substr(0,pos+1),"asp/upload.asp"].join("");WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});//加载控件