网站建设栏目分级qq企业邮箱登录

网站建设栏目分级,qq企业邮箱登录,网站建设建设公司是干嘛的,江宁网站建设【集团级富文本编辑器国产化集成项目纪实——从需求拆解到全栈信创落地】 2023年X月X日 周X 上海浦东新区 一、项目背景与核心需求 作为某集团技术负责人#xff0c;近期承接政府数字化项目时#xff0c;客户提出关键需求#xff1a; 功能需求#xff1a; Word粘贴/导入近期承接政府数字化项目时客户提出关键需求功能需求Word粘贴/导入支持从Word复制内容含表格/形状/字体样式粘贴至编辑器图片自动上传至华为云OBS微信公众号抓取解析公众号文章HTML自动下载图片并替换为OBS链接多格式导入Word/Excel/PPT/PDF全格式支持保留原始排版和图片技术约束前端Vue2-cli wangEditor4需无缝集成不破坏现有JSP架构后端JSP Servlet需兼容IE8及国产浏览器部署华为云ECSCentOS 7 OBS对象存储未来扩展至阿里云/Azure合规要求信创兼容支持中标麒麟/统信UOS等国产OS龙芯/飞腾等国产CPU授权模式买断源代码预算≤58万避免年度续费和商务流程二、技术选型与风险评估1. 富文本编辑器插件方案对比方案优势风险国产化适配成本买断wangEditor4扩展原生支持Vue2API开放需自行开发Office解析模块完全兼容¥18万UEditor信创版政府项目经验丰富基于FlashIE8需polyfill部分兼容¥45万自定义开发完全可控开发周期长预估8人月需适配¥80万WordPaster源码版完全开源(下载源码)功能完整集成简单部署简单使用简单需要终端安装插件完全兼容¥9999决策选择WordPaster源码版理由集团年项目量1000买断授权可摊薄成本至单项目¥0.058万华为云OBS SDK提供Java/JS双版本与JSP后端无缝集成2. 信创环境验证清单浏览器CPU架构# 龙芯3A5000测试命令cat/proc/cpuinfo|grepmodel namejava -version# 验证龙芯JDK运行环境三、核心功能开发实现1. 前端集成Vue2 wangEditor4步骤1扩展编辑器工具栏// src/components/RichTextEditor.vueimportEfromwangeditorexportdefault{mounted(){consteditornewE(#editor-container)// 添加自定义按钮editor.config.menus[...editor.config.menus,word-paste,wechat-paste]// 拦截粘贴事件editor.config.pasteTextHandle(content){returnthis.processClipboardData(content)}editor.create()},methods:{asyncprocessClipboardData(html){// 处理Word粘贴内容constdocnewDOMParser().parseFromString(html,text/html)constimagesdoc.querySelectorAll(img[src^data:image])for(letimgofimages){constblobawaitthis.dataURLtoBlob(img.src)constformDatanewFormData()formData.append(file,blob,paste-image.png)// 调用JSP后端上传接口constresawaitfetch(/file/upload,{method:POST,body:formData})consturlawaitres.text()img.srcurl}returndoc.body.innerHTML},dataURLtoBlob(dataUrl){// BASE64转Blob实现略}}}步骤2微信公众号内容抓取跨域代理// Web.xml配置代理Servlet解决跨域问题WechatProxycom.group.proxy.WechatProxyServletWechatProxy/proxy/wechat/*2. 后端实现JSP OBS SDK文件上传接口// src/com/group/servlet/FileUploadServlet.javaWebServlet(/file/upload)MultipartConfigpublicclassFileUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{PartfilePartreq.getPart(file);StringfileNameUUID.randomUUID().toString().png;// 华为云OBS配置StringendPointobs.cn-east-3.myhuaweicloud.com;Stringakyour-access-key;Stringskyour-secret-key;ObsClientobsClientnewObsClient(ak,sk,endPoint);obsClient.putObject(group-bucket,fileName,filePart.getInputStream());// 返回OBS访问URLStringurlString.format(https://%s.obs.%s.myhuaweicloud.com/%s,group-bucket,endPoint.split(\\.)[1],fileName);resp.setContentType(text/plain);resp.getWriter().print(url);}}Office文档解析Apache POI// 处理PPT中的图片publicvoidextractImagesFromPpt(InputStreampptStream,StringoutputDir)throwsIOException{XMLSlideShowpptnewXMLSlideShow(pptStream);for(XSLFSlideslide:ppt.getSlides()){for(XSLFShapeshape:slide.getShapes()){if(shapeinstanceofXSLFPictureShape){XSLFPictureDatapicData((XSLFPictureShape)shape).getPictureData();byte[]datapicData.getData();Files.write(Paths.get(outputDir,picData.getFileName()),data);}}}}四、信创环境专项优化1. 中文字体渲染优化Linux服务器配置# 统信UOS安装微软雅黑字体mkdir-p /usr/share/fonts/windowswgethttps://example.com/msyh.ttf -O /usr/share/fonts/windows/msyh.ttf fc-cache -fv2. 多云存储抽象层publicinterfaceCloudStorage{Stringupload(byte[]data,StringfileName);voiddelete(Stringkey);}publicclassObsStorageimplementsCloudStorage{// 华为云OBS实现}publicclassOssStorageimplementsCloudStorage{// 阿里云OSS实现预留}五、项目交付与验收标准功能验收在龙芯3A5000 奇安信浏览器中成功导入200页PPT微信公众号图片抓取准确率100%性能指标50MB Word文件导入耗时≤5秒并发上传支持50QPS交付物完整源代码含前端Vue组件JSP后端服务《信创环境部署指南》含龙芯/飞腾适配说明压力测试报告LoadRunner脚本及结果最终成本通过开源组件复用华为云OBS免费额度项目总成本控制在42万元内较预算节约27.6%。【项目总结】选型关键优先选择支持国产化的成熟开源框架避免重复造轮子兼容性策略采用渐进增强方案核心功能支持IE8新特性面向现代浏览器授权管理建立集团内部开源代码库实现授权一次复用无限附项目私有GitLab仓库地址已同步至集团知识管理系统授权码GOV-GROUP-2023-XXXXX复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:HelloWorld,data(){return{msg:Welcome to Your Vue.js App}},mounted(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});zyCapture.getInstance({config:{PostUrl:http://localhost:8891/upload.aspx,License2:,FileFieldName:file,Fields:{uname:test},ImageUrl:http://localhost:8891{url}}})// zyoffice// 使用前请在服务端部署zyoffice// http://www.ncmem.com/doc/view.aspx?id82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:http://localhost:13710/zyoffice/word/convert,wordExport:http://localhost:13710/zyoffice/word/export,pdf:http://localhost:13710/zyoffice/pdf/upload})// 注册菜单E.registerMenu(zyCaptureBtn,zyCaptureBtn)E.registerMenu(WordPasterBtn,WordPasterBtn)E.registerMenu(ImportWordToImgBtn,ImportWordToImgBtn)E.registerMenu(NetImportBtn,NetImportBtn)E.registerMenu(WordImportBtn,WordImportBtn)E.registerMenu(ExcelImportBtn,ExcelImportBtn)E.registerMenu(PPTImportBtn,PPTImportBtn)E.registerMenu(PDFImportBtn,PDFImportBtn)E.registerMenu(importWordBtn,importWordBtn)E.registerMenu(exportWordBtn,exportWordBtn)E.registerMenu(importPdfBtn,importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}测试前请配置图片上传接口并测试成功接口测试接口返回JSON格式参考为编辑器添加按钮components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例