wangEditor粘贴pdf文件保留文本高亮样式

集团 Word 导入产品攻坚记：从寻觅到落地

作为集团旗下软件子公司的项目负责人，我深知此次任务的分量。集团业务广泛，涵盖教育、政府、银行等多个关键行业，对信息化产品的稳定性、兼容性和服务保障都有着极高要求。此次集团提出的需求——开发一个能实现 Word 图片自动导入且保留文档样式，同时支持信创国产化软硬件环境，还要求完全开源并提供 7*24 小时在线技术支持服务的 Word 导入产品，无疑是一场充满挑战的攻坚战。

寻觅开源“良方”：大海捞针式的探索

接到任务后，我迅速组建了专项小组，成员包括经验丰富的开发工程师、测试专家以及对信创环境有深入了解的技术顾问。我们首先将目光投向了开源社区，这里是技术创新和资源共享的宝库，或许能找到符合需求的现成解决方案。

初入开源“迷宫”

我们在 GitHub、Gitee 等主流开源平台上，以“Word 导入”“图片处理”“信创兼容”等关键词进行搜索，瞬间得到了海量的结果。然而，面对这些繁杂的项目，我们犹如置身迷宫，需要逐一筛选甄别。

许多项目虽然声称支持 Word 导入，但对图片自动导入的功能却语焉不详，或者需要复杂的配置和额外的插件才能实现。还有一些项目虽然对图片处理有一定能力，但在文档样式保留方面却差强人意，导入后的文档格式混乱，与原文档相差甚远。

遭遇“信创瓶颈”

在关注功能的同时，信创国产化软硬件环境的适配问题也让我们头疼不已。部分项目虽然技术先进，但仅针对国际主流的软硬件环境进行开发，对国产操作系统、数据库和中间件的支持几乎为零。即使有些项目提到了信创适配，也缺乏详细的测试报告和实际案例，让我们不敢轻易尝试。

柳暗花明遇“曙光”

经过数周的艰苦搜索和反复测试，我们终于发现了一个名为“DocFlow - OpenImporter”的项目。这个项目完全开源，代码结构清晰，文档详细，对 Word 图片自动导入有专门优化，能够准确识别和导入各种格式的图片，并保持其在原文档中的位置和大小。在文档样式保留方面，它采用了先进的解析和渲染技术，能够高度还原 Word 文档的字体、字号、颜色、段落格式等样式。

更让我们惊喜的是，项目团队对信创环境有着深入的研究和丰富的适配经验。他们已经与多家国产软硬件厂商进行了合作，对主流的国产操作系统、数据库和中间件进行了全面适配，并提供了详细的适配指南和技术支持。虽然项目官方没有明确承诺 7*24 小时在线技术支持服务，但社区活跃度高，开发者们经常在论坛上交流问题，响应速度较快，这让我们看到了一丝希望。

开发之路：砥砺前行破难题

深度评估与定制规划

在确定将“DocFlow - OpenImporter”作为基础框架后，我们组织了专项技术研讨会，对项目进行了深度评估。我们发现，虽然该项目在功能和信创适配方面表现出色，但仍然存在一些不足之处，无法完全满足集团的业务需求。例如，在处理超大 Word 文档时，性能会有所下降；在与集团内部其他业务系统的集成方面，还需要进行二次开发。

针对这些问题，我们制定了详细的定制开发规划。一方面，我们将对项目的性能进行优化，采用分布式计算和缓存技术，提高处理超大文档的效率；另一方面，我们将开发专门的接口模块，实现与集团内部业务系统的无缝集成，方便用户在不同系统之间进行数据交换和共享。

信创环境适配攻坚

信创环境适配是本次开发的重中之重。我们与国产软硬件厂商建立了紧密的合作关系，获取了最新的技术文档和开发工具。在开发过程中，我们遇到了许多兼容性问题，例如某些国产操作系统对 JavaScript 的支持不够完善，导致项目中的部分功能无法正常运行；某些国产数据库的 SQL 语法与标准语法存在差异，影响了数据的存储和查询。

面对这些问题，我们的技术团队没有退缩，而是迎难而上。他们深入研究国产软硬件的技术特点，对项目代码进行了针对性的修改和优化。经过无数个日夜的努力，我们终于成功解决了所有兼容性问题，确保项目能够在各种信创环境下稳定运行。

测试与优化：精益求精保质量

在开发过程中，测试是确保产品质量的关键环节。我们制定了严格的测试计划，包括单元测试、集成测试、系统测试和用户验收测试等多个阶段。测试团队使用了大量的真实 Word 文档进行测试，涵盖了不同行业、不同格式、不同复杂度的文档，以确保项目在各种情况下都能够正常工作。

在测试过程中，我们发现了一些潜在的问题，例如在某些特殊情况下，图片导入会出现错位现象；文档样式在某些极端情况下会出现轻微变形。针对这些问题，我们及时反馈给开发团队，开发团队迅速进行了修复和优化。经过多轮测试和优化，项目的质量得到了显著提升，达到了集团的要求。

成果与展望：开启新征程

经过数月的艰苦努力，我们终于成功完成了 Word 导入产品的开发工作。该产品完全开源，基于“DocFlow - OpenImporter”进行了深度定制和优化，实现了 Word 图片自动导入和样式完美保留的功能，并且全面支持信创国产化软硬件环境。虽然项目官方没有提供 7*24 小时在线技术支持服务，但我们通过建立专门的技术支持团队和完善的售后服务体系，为用户提供了及时、高效的技术支持，确保用户在使用过程中遇到的问题能够得到及时解决。

目前，该产品已经在集团内部进行了试点应用，得到了用户的一致好评。未来，我们将继续关注集团的业务需求和技术发展趋势，不断对产品进行升级和优化，为集团的发展提供更加有力的技术支持。同时，我们也希望能够将该产品推广到更多的企业和机构，为推动信创产业的发展贡献自己的一份力量。

复制插件文件

安装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格式参考

为编辑器添加按钮

下载示例

点击下载完整示例