前端Word图片自动转存OSS的编辑器插件

政务信息化文档集成方案（信创兼容）

一、方案定位（政务场景深度适配）

针对集团党政、国防军工、金融等领域客户国产化兼容、数据安全、多格式集成的核心需求，推出**「政文智汇」政务文档集成中间件**，深度适配UEditor编辑器，提供Word/PPT/Excel/PDF全格式粘贴、导入功能，支持图片自动上传至华为OBS（兼容公有云/私有云），满足98万预算内买断源代码、无授权限制的集团级部署要求。

二、核心功能设计（完全匹配需求）

1. 功能矩阵（覆盖全场景）

三、前端核心代码（UEditor插件实现）

1. 多格式粘贴/导入插件（Vue2/Vue3/React兼容版）

// src/plugins/ueditor/gov-doc-plugin.js(function(U){// 插件元数据constPLUGIN_NAME='govDocImport';constICON_PATH='/static/plugins/gov-doc-import/icon.png';// 插件图标（需替换）// 初始化插件（UEditor注册）U.Editor.registerPlugin({name:PLUGIN_NAME,init:function(editor){// 注册命令：触发文件选择/粘贴editor.commands.addCommand(PLUGIN_NAME,{exec:function(editor){showImportDialog(editor);// 显示操作弹窗}});}});// ------------------------------ 弹窗与核心逻辑 ------------------------------/** * 显示导入/粘贴弹窗（兼容IE8+） */functionshowImportDialog(editor){constdialogHtml=`政务文档导入/粘贴 粘贴Word 导入Word 导入Excel 导入PPT 导入PDF 粘贴公众号`;}/** * 处理Word/公众号粘贴（含公式/图片） */functionhandlePaste(editor){try{// 兼容IE8剪贴板获取constclipboardData=window.clipboardData||(event.clipboardData&&event.clipboardData);if(!clipboardData)returnalert('请复制内容后粘贴');consthtml=clipboardData.getData('text/html');// 提取并上传图片→替换为OBS URLprocessImages(html,editor).then(processedHtml=>{editor.execCommand('insertHtml',processedHtml);// 插入处理后的HTML});}catch(err){console.error('粘贴失败:',err);alert('粘贴失败：'+(err.message||'请检查浏览器权限'));}}})(UEditor);

2. Latex转MathML工具函数（兼容多终端）

// src/utils/latex-to-mathml.js/** * 将Latex公式转换为MathML（使用MathJax） * @param {string} latex Latex公式字符串 * @returns {Promise} MathML字符串 */functionlatexToMathml(latex){returnnewPromise((resolve)=>{// 动态加载MathJax（兼容旧浏览器）constscript=document.createElement('script');script.src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';script.onload=()=>{MathJax.typesetClear();constmath=MathJax.tex2chtml(latex);resolve(math.outerHTML);};document.head.appendChild(script);});}

四、后端核心代码（SpringBoot实现）

1. 华为OBS上传接口（支持公有云/私有云）

// src/main/java/com/anhui/gov/controller/ObsUploadController.java@RestController@RequestMapping("/api/obs")publicclassObsUploadController{/** * 上传图片到华为OBS（二进制存储） */@PostMapping("/upload")publicMapuploadImage(@RequestParam("file")MultipartFilefile){Mapresult=newHashMap<>();try{// 初始化OBS客户端ObsClientobsClient=newObsClient(accessKeyId,accessKeySecret,obsEndpoint);// 生成唯一文件名（避免覆盖）StringfileName="gov_docs/"+System.currentTimeMillis()+"_"+file.getOriginalFilename();// 上传文件（二进制流）obsClient.putObject(bucketName,fileName,file.getInputStream());// 生成访问URL（私有云需签名）StringossUrl="https://"+bucketName+"."+obsEndpoint+"/"+fileName;if("private".equals(System.getProperty("obs.accessType"))){Dateexpiration=newDate(System.currentTimeMillis()+3600*1000);// 1小时有效Stringsignature=obsClient.signUrl(bucketName,fileName,expiration,"GET");ossUrl+="?Authorization="+signature;}result.put("code","200");result.put("obsUrl",ossUrl);returnresult;}catch(Exceptione){result.put("code","500");result.put("msg","上传失败："+e.getMessage());returnresult;}}}

2. Word文档解析服务（保留样式+图片）

// src/main/java/com/anhui/gov/service/WordParseService.java@ServicepublicclassWordParseService{/** * 解析Word文档为HTML（保留样式+图片） */publicStringparseDocx(InputStreamdocxStream)throwsIOException{// 使用Apache POI解析WordXWPFDocumentdocument=newXWPFDocument(docxStream);// 配置XHTML转换选项（保留样式）XHTMLOptionsoptions=XHTMLOptions.create().setIgnoreStylesIfUnused(false)// 保留未使用的样式.setFragment(true);// 仅提取正文// 处理图片（自动上传OBS）options.setImageManager(newXhtmlImageManager(){@OverridepublicStringgetImageUrl(XWPFPictureDatapictureData){try{// 调用OBS上传接口（伪代码）returnobsUploadService.uploadImage(pictureData.getInputStream());}catch(IOExceptione){return"";}}});// 转换为HTMLreturnnewXhtmlConverter().convert(document,options);}}

五、部署与集成方案（98万买断制）

1. 环境要求（完全兼容信创）

2. 集成步骤（1个工作日内完成）

1. 环境准备：

   • 安装JDK 11+、Tomcat 9.0+，配置OBS AccessKey。
   • 在华为OBS控制台创建Bucket，上传mammothConvert.js（Node.js脚本）到/js目录。

2. 前端集成：

   • 将gov-doc-plugin.js放入UEditor的plugins目录。
   • 在Vue2/Vue3/React页面初始化UEditor时加载插件：

     UE.getEditor('editor',{plugins:'govDocImport,...',// 添加插件名toolbars:[['govDocImport','source','|','bold','italic']]// 工具栏显示});

3. 后端部署：

   • 将ObsUploadController.java和WordParseService.java放入SpringBoot项目的controller和service目录。
   • 在application.properties中配置OBS参数：

     obs.endpoint=obs.cn-north-1.myhuaweicloud.com obs.accessKeyId=your-access-key-id obs.accessKeySecret=your-access-key-secret obs.bucketName=your-bucket-name

   • 打包WAR包部署至Tomcat，启动服务。

4. 测试验证：

   • 复制Word内容粘贴，检查图片是否上传至OBS。
   • 导入Excel/PPT/PDF，验证公式是否转MathML，样式是否保留。

3. 源代码交付（买断制）

• 完整代码包：包含前端插件、后端SpringBoot代码、Node.js脚本、OBS配置模板。
• 编译脚本：提供mvnw（Maven）和build.sh（Linux）用于打包。
• 培训文档：《环境搭建指南》《插件二次开发手册》《信创环境适配方案》。

六、资质与案例（满足政府国企要求）

1. 合规资质（5+政务项目验证）

七、服务承诺（7×24小时保障）

• 技术支持：专属客服群（QQ群：223813913），1小时内响应，4小时内解决紧急问题。
• 升级服务：免费提供年度功能升级（如新增WPS格式支持、国密SM4加密）。
• 数据安全：图片/文档存储支持国密SM4加密（可选），传输层强制HTTPS。

结语：本方案深度适配党政机关需求，在保证功能完整性的同时，通过买断源代码降低长期成本，完全满足98万预算内的集团级部署要求。我们期待与您合作，共同推动政务信息化国产化进程！

复制插件目录

引入插件文件

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:''});//加载控件

注意

如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段

点击查看详细教程

配置ImageMatch

匹配图片地址，如果服务器返回的是JSON则需要通过正则匹配

ImageMatch:'',

点击参考链接

配置ImageUrl

为图片地址增加域名，如果服务器返回的图片地址是相对路径，可通过此属性添加自定义域名。

ImageUrl:"",

点击查看详细教程

配置SESSION

如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。
点击查看配置教程

功能演示

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

下载示例

点击下载完整示例