news 2026/4/27 0:46:30

wangEditor实现word文档公式粘贴转MathML

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
wangEditor实现word文档公式粘贴转MathML

《独立开发者的"富文本粘贴攻坚战"：从Word地狱到云端救赎的技术实录》
——上海.NET程序员的破局之路

第一章：当需求文档变成"技术恐怖片"

作为独立开发者，我独自维护着一个基于Vue2 + wangEditor的文档协作平台。某天，产品经理甩来一份需求：
“需要支持从Word/Excel/PPT/PDF直接粘贴/导入内容，图片自动上传至阿里云OSS，且保留原始样式（字体/颜色/表格等）。后端用ASP.NET Core，数据库SQL Server。”

我盯着屏幕陷入沉思：这哪是需求，分明是**“全栈开发者の终极试炼”**。

第二章：前端战场——wangEditor的"粘贴拦截术"

1. 破解Word的"脏HTML"陷阱

Word粘贴的内容自带、等Office专属标签，直接渲染会乱码。我的解决方案：

// wangEditor配置增强consteditor=newWangEditor('#editor')editor.config.pasteFilterStyle=false// 允许基础样式editor.config.pasteIgnoreImg=false// 不忽略图片// 自定义粘贴处理editor.config.customPaste=(editor,html)=>{// 1. 清理Office冗余标签（正则暴击）letcleanHtml=html.replace(//g, '') // 移除Office绘图标签.replace(/<\/o:p>/g,' ')// 换行符转换.replace(//g, '') // 移除注释// 2. 提取Base64图片并触发上传returnextractImagesAndUpload(cleanHtml)}
2. 图片自动上传：从Base64到Blob的蜕变

Word图片默认是Base64编码，直接传输效率低下。我实现了分步处理：

asyncfunctionextractImagesAndUpload(html){constparser=newDOMParser()constdoc=parser.parseFromString(html,'text/html')constimages=doc.querySelectorAll('img[src^="data:image"]')for(letimgofimages){constbase64=img.src.split(',')[1]constblob=awaitbase64ToBlob(base64)// 自定义转换函数// 调用ASP.NET后端APIconstformData=newFormData()formData.append('file',blob,'word-image.png')fetch('/api/upload',{method:'POST',body:formData}).then(res=>res.json()).then(data=>{img.src=data.url// 替换为OSS URL})}returndoc.body.innerHTML}

效果：用户粘贴Word后，图片自动上传至OSS，编辑器内显示可访问的URL，且保留了原始字体、颜色等样式。

第三章：后端战场——ASP.NET Core的"对象存储攻防战"

1. 文件接收与OSS上传

创建专门的FileUploadController处理图片上传：

[ApiController][Route("api/[controller]")]publicclassUploadController:ControllerBase{privatereadonlyIOSSClient_ossClient;// 阿里云OSS封装接口[HttpPost]publicasyncTaskUpload(IFormFilefile){if(file==null||file.Length==0)returnBadRequest();// 生成唯一文件名varext=Path.GetExtension(file.FileName);varfileName=$"{Guid.NewGuid()}{ext}";// 上传至OSS（使用阿里云SDK）usingvarstream=file.OpenReadStream();await_ossClient.PutObjectAsync("your-bucket",$"uploads/{fileName}",stream);// 返回可访问URLvarurl=$"https://your-bucket.oss-cn-shanghai.aliyuncs.com/uploads/{fileName}";returnOk(new{url});}}
2. 文档导入：多格式转换方案

针对不同文档类型采用不同策略：

① Word/Excel/PPT → HTML
使用LibreOffice（通过Docker部署）：

publicasyncTaskConvertOfficeToHtml(stringfilePath,stringfileType){varoutputPath=Path.Combine("/tmp",$"{Guid.NewGuid()}.html");// 调用LibreOffice命令行转换varprocess=newProcess{StartInfo=newProcessStartInfo{FileName="soffice",Arguments=$"--headless --convert-to html:{fileType}--outdir /tmp{filePath}",RedirectStandardOutput=true,UseShellExecute=false}};awaitprocess.StartAsync();awaitprocess.WaitForExitAsync();returnFile.ReadAllText(outputPath);}

② PDF → HTML
使用pdf2htmlEX（需单独安装）：

publicasyncTaskConvertPdfToHtml(stringfilePath){varoutputPath=Path.Combine("/tmp",$"{Guid.NewGuid()}.html");varprocess=newProcess{StartInfo=newProcessStartInfo{FileName="pdf2htmlEX",Arguments=$"--zoom 1.3{filePath}{outputPath}",RedirectStandardOutput=true,UseShellExecute=false}};awaitprocess.StartAsync();awaitprocess.WaitForExitAsync();returnFile.ReadAllText(outputPath);}

坑点记录：

  • LibreOffice转换Excel时，复杂公式可能丢失
  • pdf2htmlEX生成的HTML需要额外CSS重置样式
  • 所有转换工具建议通过Docker部署，避免环境污染

第四章：数据库设计——SQL Server的"元数据管理"

为支持文档历史版本，设计了以下表结构：

CREATETABLEDocuments(Id UNIQUEIDENTIFIERPRIMARYKEY,Title NVARCHAR(255),Content NVARCHAR(MAX),-- 存储最终HTMLCreatedAtDATETIMEDEFAULTGETDATE(),UpdatedAtDATETIMEDEFAULTGETDATE());CREATETABLEDocumentImages(Id UNIQUEIDENTIFIERPRIMARYKEY,DocumentId UNIQUEIDENTIFIERFOREIGNKEYREFERENCESDocuments(Id),ImageUrl NVARCHAR(512),OriginalName NVARCHAR(255),SizeINT,UploadTimeDATETIMEDEFAULTGETDATE());

第五章：同行互助——QQ群里的"技术急救"

在开发过程中，加入QQ群：223813913后发现：

  • @北京-张工：“推荐用Mammoth.js处理Word，比LibreOffice轻量！”
  • @深圳-李姐：“Excel转换后表格线消失？试试OpenXML SDK直接解析.xlsx”
  • @杭州-王总：“阿里云OSS上传建议用预签名URL，避免前端直接传密钥”

群内资源推荐：

  • 前端：mammoth.js（Word转HTML）
  • 后端：NPOI（.NET处理Office文件）
  • 工具：Docker（隔离转换环境）

最终成果：从需求到上线的完整闭环

现在系统支持：
✅Word粘贴：内容+图片自动上传，样式保留
✅多文档导入：Word/Excel/PPT/PDF一键转换
✅对象存储：图片存阿里云OSS，支持CDN加速
✅版本管理：SQL Server记录文档修改历史

技术栈总结：

  • 前端：Vue2 + wangEditor（粘贴拦截+图片上传）
  • 后端：ASP.NET Core（文件处理+OSS SDK）
  • 转换工具：LibreOffice + pdf2htmlEX
  • 存储：阿里云OSS + SQL Server

最后呼吁：
如果你也在攻克富文本编辑器难题，欢迎加入QQ群：223813913，这里没有"菜鸟"，只有"即将成为大神的同行"！

（完）
——上海独立开发者·陈工

复制插件文件


安装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转换成图片上传到服务器中。

上传网络图片

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

下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/25 1:46:25

SpaceCadetPinball开源项目终极指南：重温经典弹球游戏

SpaceCadetPinball开源项目终极指南&#xff1a;重温经典弹球游戏 【免费下载链接】SpaceCadetPinball Decompilation of 3D Pinball for Windows – Space Cadet 项目地址: https://gitcode.com/gh_mirrors/sp/SpaceCadetPinball SpaceCadetPinball是一个令人惊叹的开源…

作者头像 李华
网站建设 2026/4/24 9:26:44

15、让树莓派脱离束缚，开启户外之旅

让树莓派脱离束缚，开启户外之旅 在户外使用树莓派进行任务时，有几个关键方面需要考虑，包括电源供应、设备保护、网络连接等。下面将详细介绍相关内容。 电源与设备保护 当把树莓派用于户外任务时，主要需要解决电源供应和防潮问题。 电源选择 ：锂聚合物电池组是为树莓…

作者头像 李华
网站建设 2026/4/20 16:34:25

10、网络摄像头与视频魔法

网络摄像头与视频魔法 1. 证据收集 当我们完成了 Motion 的初始设置后，就需要决定系统在检测到活动时应采取的行动。常见的响应包括发出警报、保存检测到的活动的图像和视频、将活动记录到数据库，或者通过电子邮件发出警报。 - 创建证据目录 ： pi@raspberrypi ~ $ mk…

作者头像 李华
网站建设 2026/4/20 1:32:57

仿写文章Prompt：NumberFlow SSR技术深度解析

仿写文章Prompt&#xff1a;NumberFlow SSR技术深度解析 【免费下载链接】number-flow An animated number component for React, Vue, and Svelte. 项目地址: https://gitcode.com/gh_mirrors/nu/number-flow 请基于NumberFlow项目的SSR功能&#xff0c;撰写一篇技术深…

作者头像 李华
网站建设 2026/4/24 22:37:29

BaiduPanFilesTransfers：告别百度网盘手动转存的终极解决方案

BaiduPanFilesTransfers&#xff1a;告别百度网盘手动转存的终极解决方案 【免费下载链接】BaiduPanFilesTransfers 百度网盘批量转存工具 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduPanFilesTransfers 你是否曾经为了转存几个百度网盘分享链接&#xff0c;不得…

作者头像 李华
网站建设 2026/4/22 1:09:05

OpenWrt网络加速神器：迅雷快鸟插件终极配置指南

OpenWrt网络加速神器&#xff1a;迅雷快鸟插件终极配置指南 【免费下载链接】luci-app-xlnetacc OpenWrt/LEDE LuCI for XLNetAcc (迅雷快鸟) 项目地址: https://gitcode.com/gh_mirrors/lu/luci-app-xlnetacc 在当今高速网络时代&#xff0c;OpenWrt系统用户有了更好的…

作者头像 李华