核心内容摘要
b站视频在线免费观看
江西铁路行业集团公司项目需求解决方案项目背景作为江西铁路行业集团公司的项目负责人我近期负责一个企业网站后台管理系统的升级项目。
项目新增需求包括在文章发布模块中增加Word粘贴功能、Word文档导入功能以及微信公众号内容粘贴功能。
这些功能需要通过在Web编辑器工具栏中添加插件按钮来实现确保集成简单、不影响现有系统功能并且支持多平台、多浏览器环境。
技术选型与需求分析前端技术栈框架: Vue3 CLI (部分项目使用React)编辑器: 百度开源富文本编辑器UEditor浏览器兼容性: 包括IE8在内的所有浏览器以及信创国产浏览器奇安信安全浏览器、龙芯浏览器、红莲花安全浏览器等后端技术栈框架: JSP开发工具: Eclipse JEE、MyEclipse、IntelliJ IDEA数据库: MySQL服务器: 阿里云ECSCentOS、RedHat云存储: 阿里云对象存储OSS支持私有云、公有云、混合云其他要求信创国产化环境支持: Windows、macOS、Linux、RedHat、CentOS、Ubuntu、中标麒麟、银河麒麟、统信UOSCPU支持: x86 (Intel, AMD, 兆芯, 海光), ARM (鲲鹏, 飞腾), 龙芯 (MIPS, LoongArch)预算: 98万以内买断产品源代码提供编译打包发布培训指导资质要求: 软件厂商需提供至少5个央企、国企或政府事业单位项目合作资料合同原件、银行转账凭证、信创环境兼容认证书、软件产品著作权、营业执照、法人身份证原件解决方案前端实现
增加UEditor插件按钮在UEditor的工具栏中增加自定义按钮用于触发Word粘贴和导入功能。
// 在UEditor配置文件中增加自定义按钮UE.registerUI(wordImport,function(editor,uiName){varbtnnewUE.ui.Button({name:uiName,title:Word导入,onclick:function(){// 触发文件选择对话框document.getElementById(wordImportInput).click();}});editor.addListener(ready,function(){editor.afterConfigReady(function(){editor.ui.add(btn);});});returnbtn;});// 隐藏的文件输入元素varfileInputdocument.createElement(input);fileInput.typefile;fileInput.idwordImportInput;fileInput.accept.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf;fileInput.style.displaynone;fileInput.onchangefunction(e){varfilee.target.files[0];if(file){handleFileImport(file);}};document.body.appendChild(fileInput);functionhandleFileImport(file){varformDatanewFormData();formData.append(file,file);fetch(/api/upload,{method:POST,body:formData}).then(responseresponse.json()).then(data{if(data.success){// 将返回的HTML内容插入编辑器vareditorUE.getEditor(editor);editor.setContent(data.content,true);}else{alert(导入失败: data.message);}}).catch(error{console.error(Error:,error);alert(导入过程中发生错误);});}
微信公众号内容粘贴功能实现微信公众号文章的粘贴功能自动下载图片并上传到服务器。
UE.registerUI(wechatPaste,function(editor,uiName){varbtnnewUE.ui.Button({name:uiName,title:粘贴微信公众号内容,onclick:function(){// 监听粘贴事件editor.addListener(paste,function(type,evt){varhtmlevt.html;if(html){processWechatContent(html,editor);}});}});editor.addListener(ready,function(){editor.afterConfigReady(function(){editor.ui.add(btn);});});returnbtn;});functionprocessWechatContent(html,editor){vartempDivdocument.createElement(div);tempDiv.innerHTMLhtml;varimgstempDiv.querySelectorAll(img);varpromises[];imgs.forEach(img{varsrcimg.src;if(src.startsWith(http)){promises.push(downloadAndUploadImage(src).then(newUrl{img.srcnewUrl;}));}});Promise.all(promises).then((){editor.setContent(tempDiv.innerHTML,true);});}functiondownloadAndUploadImage(url){returnfetch(url).then(responseresponse.blob()).then(blob{varformDatanewFormData();formData.append(file,blob,image.jpg);returnfetch(/api/uploadImage,{method:POST,body:formData}).then(responseresponse.json()).then(data{if(data.success){returndata.url;}else{thrownewError(图片上传失败);}});});}后端实现
文件上传接口处理Word、Excel、PPT、PDF文件的上传和内容提取。
WebServlet(/api/upload)publicclassFileUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePartrequest.getPart(file);StringfileNamefilePart.getSubmittedFileName();InputStreamfileContentfilePart.getInputStream();// 根据文件类型处理Stringcontent;if(fileName.endsWith(.doc)||fileName.endsWith(.docx)){contentWordProcessor.extractContent(fileContent);}elseif(fileName.endsWith(.xls)||fileName.endsWith(.xlsx)){contentExcelProcessor.extractContent(fileContent);}elseif(fileName.endsWith(.ppt)||fileName.endsWith(.pptx)){contentPptProcessor.extractContent(fileContent);}elseif(fileName.endsWith(.pdf)){contentPdfProcessor.extractContent(fileContent);}// 返回处理后的HTML内容response.setContentType(application/json);response.setCharacterEncoding(UTF-
;response.getWriter().write(String.format({\success\: true, \content\: \%s\},escapeJsonString(content)));}privateStringescapeJsonString(Stringinput){returninput.replace(\\,\\\\).replace(\,\\\);}}
图片上传接口处理从微信公众号内容中提取的图片上传。
WebServlet(/api/uploadImage)publicclassImageUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePartrequest.getPart(file);InputStreamfileContentfilePart.getInputStream();StringfileNamefilePart.getSubmittedFileName();// 生成唯一文件名StringuniqueFileNameUUID.randomUUID().toString()fileName.substring(fileName.lastIndexOf(.));// 上传到阿里云OSSStringfileUrlAliyunOssUtil.uploadFile(uniqueFileName,fileContent);// 返回图片URLresponse.setContentType(application/json);response.setCharacterEncoding(UTF-
;response.getWriter().write(String.format({\success\: true, \url\: \%s\},fileUrl));}}阿里云OSS工具类importcom.aliyun.oss.OSS;importcom.aliyun.oss.OSSClientBuilder;importjava.io.InputStream;publicclassAliyunOssUtil{privatestaticfinalStringENDPOINTyour-oss-endpoint;privatestaticfinalStringACCESS_KEY_IDyour-access-key-id;privatestaticfinalStringACCESS_KEY_SECRETyour-access-key-secret;privatestaticfinalStringBUCKET_NAMEyour-bucket-name;publicstaticStringuploadFile(StringobjectName,InputStreaminputStream){// 创建OSSClient实例OSSossClientnewOSSClientBuilder().build(ENDPOINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);try{// 上传文件流ossClient.putObject(BUCKET_NAME,objectName,inputStream);// 返回文件访问URLreturnhttps://BUCKET_NAME.ENDPOINT/objectName;}finally{// 关闭OSSClientossClient.shutdown();}}}项目部署与集成前端部署将前端代码打包后部署到Web服务器如Nginx、Apache。
确保UEditor的配置文件正确指向后端接口。
后端部署使用Eclipse JEE、MyEclipse或IntelliJ IDEA导入项目。
配置数据库连接和阿里云OSS参数。
打包为WAR文件并部署到Tomcat服务器。
信创环境兼容性确保所有组件和依赖库在以下环境中运行正常操作系统: Windows, macOS, Linux, RedHat, CentOS, Ubuntu, 中标麒麟, 银河麒麟, 统信UOS浏览器: IE8及以上, 奇安信安全浏览器, 龙芯浏览器, 红莲花安全浏览器CPU架构: x86, ARM, 龙芯预算与授权预算: 98万以内买断产品源代码。
授权: 无限制使用提供编译打包发布培训指导。
资质要求: 软件厂商需提供至少5个央企、国企或政府事业单位项目合作资料。
总结通过上述方案我们可以在现有系统中无缝集成Word粘贴、Word文档导入和微信公众号内容粘贴功能满足多平台、多浏览器环境的需求并确保信创国产化环境的兼容性。
项目部署简单不影响现有系统功能能够大大提升用户的使用体验。
复制插件目录引入插件文件UEditor
1.
4.
3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-
4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos
,asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。
ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。
ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。
或取消权限验证。
参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例