跨浏览器兼容性测试中，UEDITOR的ELECTRON图片转存如何通过？

江西铁路行业集团公司项目需求解决方案

项目背景

作为江西铁路行业集团公司的项目负责人，我近期负责一个企业网站后台管理系统的升级项目。项目新增需求包括在文章发布模块中增加Word粘贴功能、Word文档导入功能以及微信公众号内容粘贴功能。这些功能需要通过在Web编辑器工具栏中添加插件按钮来实现，确保集成简单、不影响现有系统功能，并且支持多平台、多浏览器环境。

技术选型与需求分析

前端技术栈

• 框架: Vue3 CLI (部分项目使用React)
• 编辑器: 百度开源富文本编辑器UEditor
• 浏览器兼容性: 包括IE8在内的所有浏览器，以及信创国产浏览器（奇安信安全浏览器、龙芯浏览器、红莲花安全浏览器等）

后端技术栈

• 框架: JSP
• 开发工具: Eclipse JEE、MyEclipse、IntelliJ IDEA
• 数据库: MySQL
• 服务器: 阿里云ECS（CentOS、RedHat）
• 云存储: 阿里云对象存储（OSS），支持私有云、公有云、混合云

其他要求

• 信创国产化环境支持: Windows、macOS、Linux、RedHat、CentOS、Ubuntu、中标麒麟、银河麒麟、统信UOS
• CPU支持: x86 (Intel, AMD, 兆芯, 海光), ARM (鲲鹏, 飞腾), 龙芯 (MIPS, LoongArch)
• 预算: 98万以内，买断产品源代码，提供编译打包发布培训指导
• 资质要求: 软件厂商需提供至少5个央企、国企或政府事业单位项目合作资料（合同原件、银行转账凭证、信创环境兼容认证书、软件产品著作权、营业执照、法人身份证原件）

解决方案

前端实现

1. 增加UEditor插件按钮

在UEditor的工具栏中增加自定义按钮，用于触发Word粘贴和导入功能。

// 在UEditor配置文件中增加自定义按钮UE.registerUI('wordImport',function(editor,uiName){varbtn=newUE.ui.Button({name:uiName,title:'Word导入',onclick:function(){// 触发文件选择对话框document.getElementById('wordImportInput').click();}});editor.addListener('ready',function(){editor.afterConfigReady(function(){editor.ui.add(btn);});});returnbtn;});// 隐藏的文件输入元素varfileInput=document.createElement('input');fileInput.type='file';fileInput.id='wordImportInput';fileInput.accept='.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf';fileInput.style.display='none';fileInput.onchange=function(e){varfile=e.target.files[0];if(file){handleFileImport(file);}};document.body.appendChild(fileInput);functionhandleFileImport(file){varformData=newFormData();formData.append('file',file);fetch('/api/upload',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.success){// 将返回的HTML内容插入编辑器vareditor=UE.getEditor('editor');editor.setContent(data.content,true);}else{alert('导入失败: '+data.message);}}).catch(error=>{console.error('Error:',error);alert('导入过程中发生错误');});}

2. 微信公众号内容粘贴功能

实现微信公众号文章的粘贴功能，自动下载图片并上传到服务器。

UE.registerUI('wechatPaste',function(editor,uiName){varbtn=newUE.ui.Button({name:uiName,title:'粘贴微信公众号内容',onclick:function(){// 监听粘贴事件editor.addListener('paste',function(type,evt){varhtml=evt.html;if(html){processWechatContent(html,editor);}});}});editor.addListener('ready',function(){editor.afterConfigReady(function(){editor.ui.add(btn);});});returnbtn;});functionprocessWechatContent(html,editor){vartempDiv=document.createElement('div');tempDiv.innerHTML=html;varimgs=tempDiv.querySelectorAll('img');varpromises=[];imgs.forEach(img=>{varsrc=img.src;if(src.startsWith('http')){promises.push(downloadAndUploadImage(src).then(newUrl=>{img.src=newUrl;}));}});Promise.all(promises).then(()=>{editor.setContent(tempDiv.innerHTML,true);});}functiondownloadAndUploadImage(url){returnfetch(url).then(response=>response.blob()).then(blob=>{varformData=newFormData();formData.append('file',blob,'image.jpg');returnfetch('/api/uploadImage',{method:'POST',body:formData}).then(response=>response.json()).then(data=>{if(data.success){returndata.url;}else{thrownewError('图片上传失败');}});});}

后端实现

1. 文件上传接口

处理Word、Excel、PPT、PDF文件的上传和内容提取。

@WebServlet("/api/upload")publicclassFileUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePart=request.getPart("file");StringfileName=filePart.getSubmittedFileName();InputStreamfileContent=filePart.getInputStream();// 根据文件类型处理Stringcontent="";if(fileName.endsWith(".doc")||fileName.endsWith(".docx")){content=WordProcessor.extractContent(fileContent);}elseif(fileName.endsWith(".xls")||fileName.endsWith(".xlsx")){content=ExcelProcessor.extractContent(fileContent);}elseif(fileName.endsWith(".ppt")||fileName.endsWith(".pptx")){content=PptProcessor.extractContent(fileContent);}elseif(fileName.endsWith(".pdf")){content=PdfProcessor.extractContent(fileContent);}// 返回处理后的HTML内容response.setContentType("application/json");response.setCharacterEncoding("UTF-8");response.getWriter().write(String.format("{\"success\": true, \"content\": \"%s\"}",escapeJsonString(content)));}privateStringescapeJsonString(Stringinput){returninput.replace("\\","\\\\").replace("\"","\\\"");}}

2. 图片上传接口

处理从微信公众号内容中提取的图片上传。

@WebServlet("/api/uploadImage")publicclassImageUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePart=request.getPart("file");InputStreamfileContent=filePart.getInputStream();StringfileName=filePart.getSubmittedFileName();// 生成唯一文件名StringuniqueFileName=UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf('.'));// 上传到阿里云OSSStringfileUrl=AliyunOssUtil.uploadFile(uniqueFileName,fileContent);// 返回图片URLresponse.setContentType("application/json");response.setCharacterEncoding("UTF-8");response.getWriter().write(String.format("{\"success\": true, \"url\": \"%s\"}",fileUrl));}}

阿里云OSS工具类

importcom.aliyun.oss.OSS;importcom.aliyun.oss.OSSClientBuilder;importjava.io.InputStream;publicclassAliyunOssUtil{privatestaticfinalStringENDPOINT="your-oss-endpoint";privatestaticfinalStringACCESS_KEY_ID="your-access-key-id";privatestaticfinalStringACCESS_KEY_SECRET="your-access-key-secret";privatestaticfinalStringBUCKET_NAME="your-bucket-name";publicstaticStringuploadFile(StringobjectName,InputStreaminputStream){// 创建OSSClient实例OSSossClient=newOSSClientBuilder().build(ENDPOINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);try{// 上传文件流ossClient.putObject(BUCKET_NAME,objectName,inputStream);// 返回文件访问URLreturn"https://"+BUCKET_NAME+"."+ENDPOINT+"/"+objectName;}finally{// 关闭OSSClientossClient.shutdown();}}}

项目部署与集成

前端部署

1. 将前端代码打包后部署到Web服务器（如Nginx、Apache）。
2. 确保UEditor的配置文件正确指向后端接口。

后端部署

1. 使用Eclipse JEE、MyEclipse或IntelliJ IDEA导入项目。
2. 配置数据库连接和阿里云OSS参数。
3. 打包为WAR文件并部署到Tomcat服务器。

信创环境兼容性

确保所有组件和依赖库在以下环境中运行正常：

• 操作系统: Windows, macOS, Linux, RedHat, CentOS, Ubuntu, 中标麒麟, 银河麒麟, 统信UOS
• 浏览器: IE8及以上, 奇安信安全浏览器, 龙芯浏览器, 红莲花安全浏览器
• CPU架构: x86, ARM, 龙芯

预算与授权

• 预算: 98万以内，买断产品源代码。
• 授权: 无限制使用，提供编译打包发布培训指导。
• 资质要求: 软件厂商需提供至少5个央企、国企或政府事业单位项目合作资料。

总结

通过上述方案，我们可以在现有系统中无缝集成Word粘贴、Word文档导入和微信公众号内容粘贴功能，满足多平台、多浏览器环境的需求，并确保信创国产化环境的兼容性。项目部署简单，不影响现有系统功能，能够大大提升用户的使用体验。

复制插件目录

引入插件文件

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。或取消权限验证。
参考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

下载示例

点击下载完整示例