政务CMS如何用wangEditor实现PDF表单数据到网页的映射？

【集团级富文本编辑器国产化集成项目纪实——从需求拆解到全栈信创落地】
2023年X月X日 周X 上海·浦东新区

一、项目背景与核心需求

作为某集团技术负责人，近期承接政府数字化项目时，客户提出关键需求：

1. 功能需求：

   • Word粘贴/导入：支持从Word复制内容（含表格/形状/字体样式）粘贴至编辑器，图片自动上传至华为云OBS
   • 微信公众号抓取：解析公众号文章HTML，自动下载图片并替换为OBS链接
   • 多格式导入：Word/Excel/PPT/PDF全格式支持，保留原始排版和图片

2. 技术约束：

   • 前端：Vue2-cli + wangEditor4（需无缝集成，不破坏现有JSP架构）
   • 后端：JSP + Servlet（需兼容IE8及国产浏览器）
   • 部署：华为云ECS（CentOS 7） + OBS对象存储（未来扩展至阿里云/Azure）

3. 合规要求：

   • 信创兼容：支持中标麒麟/统信UOS等国产OS，龙芯/飞腾等国产CPU
   • 授权模式：买断源代码（预算≤58万），避免年度续费和商务流程

二、技术选型与风险评估

1. 富文本编辑器插件方案对比

决策：选择WordPaster源码版，理由：

• 集团年项目量1000+，买断授权可摊薄成本至单项目¥0.058万
• 华为云OBS SDK提供Java/JS双版本，与JSP后端无缝集成

2. 信创环境验证清单

• 浏览器：

• CPU架构：

  # 龙芯3A5000测试命令cat/proc/cpuinfo|grep"model name"java -version# 验证龙芯JDK运行环境

三、核心功能开发实现

1. 前端集成（Vue2 + wangEditor4）

步骤1：扩展编辑器工具栏

// src/components/RichTextEditor.vueimportEfrom'wangeditor'exportdefault{mounted(){consteditor=newE('#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粘贴内容constdoc=newDOMParser().parseFromString(html,'text/html')constimages=doc.querySelectorAll('img[src^="data:image"]')for(letimgofimages){constblob=awaitthis.dataURLtoBlob(img.src)constformData=newFormData()formData.append('file',blob,'paste-image.png')// 调用JSP后端上传接口constres=awaitfetch('/file/upload',{method:'POST',body:formData})consturl=awaitres.text()img.src=url}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.java@WebServlet("/file/upload")@MultipartConfigpublicclassFileUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{PartfilePart=req.getPart("file");StringfileName=UUID.randomUUID().toString()+".png";// 华为云OBS配置StringendPoint="obs.cn-east-3.myhuaweicloud.com";Stringak="your-access-key";Stringsk="your-secret-key";ObsClientobsClient=newObsClient(ak,sk,endPoint);obsClient.putObject("group-bucket",fileName,filePart.getInputStream());// 返回OBS访问URLStringurl=String.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{XMLSlideShowppt=newXMLSlideShow(pptStream);for(XSLFSlideslide:ppt.getSlides()){for(XSLFShapeshape:slide.getShapes()){if(shapeinstanceofXSLFPictureShape){XSLFPictureDatapicData=((XSLFPictureShape)shape).getPictureData();byte[]data=picData.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 -fv

2. 多云存储抽象层

publicinterfaceCloudStorage{Stringupload(byte[]data,StringfileName);voiddelete(Stringkey);}publicclassObsStorageimplementsCloudStorage{// 华为云OBS实现}publicclassOssStorageimplementsCloudStorage{// 阿里云OSS实现（预留）}

五、项目交付与验收标准

1. 功能验收：

   • 在龙芯3A5000 + 奇安信浏览器中成功导入200页PPT
   • 微信公众号图片抓取准确率100%

2. 性能指标：

   • 50MB Word文件导入耗时≤5秒
   • 并发上传支持50QPS

3. 交付物：

   • 完整源代码（含前端Vue组件+JSP后端服务）
   • 《信创环境部署指南》（含龙芯/飞腾适配说明）
   • 压力测试报告（LoadRunner脚本及结果）

最终成本：通过开源组件复用+华为云OBS免费额度，项目总成本控制在42万元内，较预算节约27.6%。

【项目总结】

1. 选型关键：优先选择支持国产化的成熟开源框架，避免重复造轮子
2. 兼容性策略：采用"渐进增强"方案，核心功能支持IE8，新特性面向现代浏览器
3. 授权管理：建立集团内部开源代码库，实现授权一次复用无限

（附：项目私有GitLab仓库地址已同步至集团知识管理系统，授权码：GOV-GROUP-2023-XXXXX）

复制插件文件

安装jquery

npm install jquery

导入组件

importEfrom'wangeditor'const{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}=Eimport{WordPaster}from'../../static/WordPaster/js/w'import{zyCapture}from'../../static/zyCapture/z'import{zyOffice}from'../../static/zyOffice/js/o'

初始化组件

//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-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(){vareditor=newE('#editor');WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:"http://localhost:8891/upload.aspx",License2:"",//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"http://localhost:8891{url}",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});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?id=82170058de824b5c86e2e666e5be319czyOffice.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.length=0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2=newE('#editor2');//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length=0;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转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例