wangEditor粘贴ppt幻灯片转存网页兼容处理

《.NET程序员的CMS升级记：Word一键粘贴+公式全兼容，680元预算搞掂！》

一、客户爸爸的需求

“小王啊，我们领导说每次从Word复制新闻到后台，表格变形、公式变乱码，连图片都丢了…”
“张总，我调研了，要支持Word/Excel/PPT/PDF全格式，还得兼容MathType和LaTeX公式，预算…”
“680元！多一分没有！要能直接粘贴Word内容，保留所有样式！”

被客户按在地上摩擦后，我摸着所剩无几的头发，决定用680元预算给wangEditor加个"黑科技"插件，实现：

1. Word/Excel/PPT/PDF/公众号一键导入，图片自动上传OSS
2. LaTeX/MathType公式自动转MathML，多端高清显示
3. 表格/字体/颜色/形状样式全保留（包括刁钻的emz/wmz格式）
4. 开箱即用，不破坏现有业务逻辑

二、技术选型（性价比版）

总预算：680元（预留给OSS流量费+群红包）

三、前端实现（Vue2 + wangEditor）

1. 安装依赖

npminstallwangeditor docx-preview xlsx pdfjs-dist katex --save

2. 自定义编辑器插件

// src/plugins/OfficeImportPlugin.jsimportEditorfrom'wangeditor'import*asdocxfrom'docx-preview'import*asXLSXfrom'xlsx'import{getDocument}from'pdfjs-dist'importkatexfrom'katex'exportdefaultclassOfficeImportPlugin{constructor(editor,ossConfig){this.editor=editorthis.ossConfig=ossConfigthis.initButton()}initButton(){const{editor}=thiseditor.config.menus=[...editor.config.menus,'officeImport']// 注册菜单按钮editor.config.customUploadImg=async(files,insertFn)=>{awaitthis.uploadFiles(files,insertFn)}// 监听粘贴事件editor.config.customPaste=(e)=>{this.handlePaste(e)}}asynchandlePaste(e){constitems=(e.clipboardData||window.clipboardData).itemsfor(letitemofitems){// 处理Word粘贴if(item.type.includes('office')){constfile=item.getAsFile()awaitthis.importOfficeFile(file)e.preventDefault()}// 处理公众号图文粘贴（简化版）elseif(item.type.includes('text/html')){consthtml=awaitnewPromise(resolve=>item.getAsString(resolve))if(html.includes('mp.weixin.qq.com')){awaitthis.importWechatContent(html)e.preventDefault()}}}}asyncimportOfficeFile(file){constext=file.name.split('.').pop().toLowerCase()lethtml=''if(ext==='docx'){constarrayBuffer=awaitfile.arrayBuffer()html=awaitdocx.renderAsync(arrayBuffer,document.createElement('div'))}elseif(ext==='xlsx'){constdata=awaitfile.arrayBuffer()constworkbook=XLSX.read(data)html=XLSX.utils.sheet_to_html(workbook.Sheets[workbook.SheetNames[0]])}elseif(ext==='pdf'){constpdf=awaitgetDocument(awaitfile.arrayBuffer()).promise// PDF转HTML逻辑（需自行实现）}// 处理公式和图片awaitthis.processContent(html)}asyncprocessContent(html){// 1. 替换公式（LaTeX转MathML）html=html.replace(/\$\$(.*?)\$\$/g,(match,latex)=>{try{returnkatex.renderToString(latex,{throwOnError:false,output:'mathml'})}catch{returnmatch// 失败保留原样}})// 2. 处理图片（上传OSS）consttempDiv=document.createElement('div')tempDiv.innerHTML=htmlconstimgs=tempDiv.querySelectorAll('img[src^="data:"]')for(letimgofimgs){constfile=this.dataURLtoFile(img.src,'pasted-image.png')consturl=awaitthis.uploadToOSS(file)img.src=url}this.editor.cmd.do('insertHTML',tempDiv.innerHTML)}// 上传到OSS（简化版）asyncuploadToOSS(file){constformData=newFormData()formData.append('file',file)constresponse=awaitfetch('/api/upload',{method:'POST',body:formData})return(awaitresponse.json()).url}}

3. 集成到Vue组件

import Editor from 'wangeditor' import OfficeImportPlugin from './plugins/OfficeImportPlugin' export default { data() { return { editor: null, ossConfig: { region: 'oss-cn-hangzhou', accessKeyId: 'your-key', accessKeySecret: 'your-secret', bucket: 'your-bucket' } } }, mounted() { this.editor = new Editor({ selector: [this.$refs.editorMenu, this.$refs.editorContent], onChange: () => console.log('内容变化') }) new OfficeImportPlugin(this.editor, this.ossConfig) this.editor.create() } }

四、后端实现（ASP.NET WebForm）

1. OSS上传接口

// api/upload.ashx<%@WebHandlerLanguage="C#"Class="UploadHandler"%>usingSystem;usingSystem.IO;usingSystem.Web;usingAliyun.OSS;publicclassUploadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentType="application/json";varfile=context.Request.Files[0];varobjectName="uploads/"+Guid.NewGuid().ToString()+Path.GetExtension(file.FileName);// 阿里云OSS配置（建议从Web.config读取）varendpoint="https://oss-cn-hangzhou.aliyuncs.com";varaccessKeyId="your-key";varaccessKeySecret="your-secret";varbucketName="your-bucket";varclient=newOssClient(endpoint,accessKeyId,accessKeySecret);using(varstream=file.InputStream){client.PutObject(bucketName,objectName,stream);}context.Response.Write($"{{\"url\":\"https://{bucketName}.{endpoint}/{objectName}\"}}");}publicboolIsReusable=>false;}

2. 公众号内容处理接口（简化版）

// api/wechat.ashx<%@WebHandlerLanguage="C#"Class="WechatHandler"%>usingSystem;usingSystem.Web;usingHtmlAgilityPack;publicclassWechatHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){varhtml=context.Request.Form["html"];vardoc=newHtmlDocument();doc.LoadHtml(html);// 提取公众号正文（简化版）varcontentNode=doc.DocumentNode.SelectSingleNode("//div[@id='js_content']");if(contentNode!=null){// 处理公众号图片（替换为OSS地址）foreach(varimgincontentNode.SelectNodes("//img")){vardataSrc=img.GetAttributeValue("data-src","");if(!string.IsNullOrEmpty(dataSrc)){// 这里应该下载图片并上传到OSSimg.SetAttributeValue("src",dataSrc);}}context.Response.Write(contentNode.OuterHtml);}else{context.Response.Write(html);}}publicboolIsReusable=>false;}

五、部署优化

1. 跨域问题：在阿里云OSS配置CORS规则

[{"AllowedOrigin":["*"],"AllowedMethod":["GET","POST","PUT"],"AllowedHeader":["*"]}]

2. 性能优化：

   • 使用CDN加速KaTeX资源
   • 对大文件分片上传
   • 启用OSS图片处理（缩略图/水印）

3. 安全加固：

   • 接口添加防伪令牌验证
   • 限制上传文件类型
   • 对LaTeX公式进行XSS过滤

六、求职彩蛋

"各位同行，我们外包群现在搞活动：

1. 加入QQ群：223813913 领1-99元红包
2. 推荐客户拿20%提成（黄金会员50%！）
3. 内推简历优先处理（群主在郑州/深圳有HR资源）

PS：群文件有完整源码+部署文档，支持Vue2无缝迁移，ASP.NET后端可直接发布到IIS！"

最终效果：

（客户测试后：“这比Word还好用！”）

预算分配：

• 600元：OSS流量费（按实际使用）
• 50元：群红包
• 30元：咖啡续命费

风险提示：

1. emz/wmz格式需要额外转换工具
2. 复杂公式可能需要手动调整
3. 公众号图片防盗链需特殊处理

（全文完，求打赏/转发/内推三连！）

复制插件文件

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

上传网络图片

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

下载示例

点击下载完整示例