news 2026/4/3 3:00:20

wangEditor复制word图片转存到CMS系统

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
wangEditor复制word图片转存到CMS系统

川式PHP程序员のCMS编辑器魔改日记（附红包代码）

一、需求辣评

“客户要Word一键粘贴，还要保留MathType公式！”——这需求比让我用PHP写线程还魔幻！不过咱是谁？川渝PHP裁缝王，左手Vue3，右手PHP，怀里揣着wangEditor，今天就要把Word粘贴功能整得比火锅还上头！

二、技术选型（穷鬼豪华版）

  • 前端：Vue3 + wangEditor（免费版香得很）
  • 后端：PHP（老板说不能换框架）
  • 云存储：阿里云OSS（客户给的测试额度还没用完）
  • 核心武器：
    • phpoffice/phpword（解析Word）
    • mathjax-node（公式转MathML）
    • smallot/docx-parser（备用方案）

三、前端插件开发（Vue3骚操作）

// src/plugins/WordPastePlugin.jsexportdefault{install(editor){// 1. 工具栏加按钮（比加香菜还简单）editor.config.MENU_CONF['wordImport']={title:'Word粘贴',icon:'',click:()=>this.triggerWordImport()};// 2. 监听粘贴事件（比偷吃回锅肉还刺激）editor.config.pasteFilterStyle=false;editor.config.pasteIgnoreImg=false;document.addEventListener('paste',async(e)=>{if(e.clipboardData.files.length>0){awaitthis.handleFileUpload(e.clipboardData.files[0]);}else{consthtml=e.clipboardData.getData('text/html');if(html.includes('mso-'))this.cleanWordGarbage(html);}});},asynccleanWordGarbage(dirtyHtml){// 用正则给Word的垃圾HTML洗剪吹（比理发店Tony还狠）constcleanHtml=dirtyHtml.replace(//g, '').replace(/.*?<\/o:p>/g,'').replace(/]*style="mso-[^"]*">/g,'');// 调用后端处理公式（MathJax接招！）constres=awaitfetch('/api/convert-math',{method:'POST',body:cleanHtml});this.editor.insertHTML(awaitres.text());},asynchandleFileUpload(file){constformData=newFormData();formData.append('file',file);constres=awaitfetch('/api/upload-word',{method:'POST',body:formData});constdata=awaitres.json();this.editor.insertHTML(data.html);}};

四、PHP后端代码（比串串香还热辣）

// api/upload-word.php - 处理Word文件getContent();// 3. 处理图片（上传到OSS）$ossClient=newOSS\OssClient('accessKeyId','accessKeySecret','endpoint');foreach($phpWord->getSections()as$section){foreach($section->getElements()as$element){if($elementinstanceof\PhpOffice\PhpWord\Element\Image){$imagePath='/tmp/'.uniqid().'.jpg';file_put_contents($imagePath,$element->getImageStringData());$ossClient->uploadObject('bucket-name','images/'.basename($imagePath),$imagePath);unlink($imagePath);}}}// 4. 返回干净HTML（给前端下火锅）echojson_encode(['success'=>true,'html'=>cleanWordHtml($dirtyHtml)]);}catch(Exception$e){echojson_encode(['error'=>$e->getMessage()]);}functioncleanWordHtml($html){// 删除Word垃圾标签（比删前任微信还彻底）$html=preg_replace('/]*>.*?<\/w:[^>]*>/','',$html);$html=preg_replace('/]*>.*?<\/o:[^>]*>/','',$html);return$html;}?>// api/convert-math.php - 处理公式Error'; function convertLaTeXToMathML($latex) { // 实际应该调用MathJax Node服务，这里用假数据 return 'x2';}?>

五、部署攻略（比点鸳鸯锅还快）

  1. 前端部署：

    npmrun build# 把dist文件夹丢到Apache/Nginx目录

  2. 后端部署：

    • 上传PHP文件到服务器
    • 配置composer.json：
      {"require":{"phpoffice/phpword":"^0.18.0"}}
    • 运行composer install

  3. 阿里云OSS配置：

    • 创建Bucket：cms-bucket
    • 设置CORS规则（允许你的域名）

六、QQ群暴富指南（比买彩票靠谱）

  1. 新人福利：

    • 加群喊"PHP王到此一游"领红包（1-99元）
    • 群文件有《PHP写微服务指南》《Vue3防脱发手册》

  2. 躺赚攻略：

    • 推荐客户成交：20%提成（680元项目=136元红包）
    • 升级黄金会员：50%提成（月入10万不是梦）
    • 群文件有《客户话术模板.docx》，照着念就能签单

  3. 风险提示：

    • 不要在群里发"PHP是世界上最好的语言"（会被踢）
    • 提成到账前别卸载支付宝（防止群主跑路）

七、最终效果

  • 用户操作：Ctrl+C → 点击"Word粘贴" → 发布
  • 实际发生：
    1. 前端偷偷调用PHP接口
    2. PHP用PhpWord解析Word
    3. MathJax转换公式
    4. 图片自动上传OSS
    5. 返回纯净HTML给编辑器

效果演示：

E=mc² x=-b2a E=mc² x=-b2a

群号最后call：223813913（进群喊"PHP王带飞"领红包）
项目预算：680元（实际成本：1包辣条+2杯冰粉）
技术难度：⭐⭐（比用ThinkPHP简单）
赚钱难度：⭐（比在群里抢红包还简单）

提示：代码已做脱敏处理，实际使用时需替换阿里云OSS配置和MathJax服务地址。建议先在测试环境部署，避免生产环境出现"公式消失术"等灵异事件。

复制插件文件


安装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/3/21 11:35:30

GLM-4.6V-Flash-WEB模型在雪地摩托旅行安全监控中的应用

GLM-4.6V-Flash-WEB模型在雪地摩托旅行安全监控中的应用 在极寒山区的雪地摩托赛道上&#xff0c;风雪呼啸、能见度不足十米。一名游客正高速穿越一片看似平坦的积雪区域——而就在他前方二十米处&#xff0c;隐藏着一段因融雪形成的薄冰层&#xff0c;随时可能引发侧滑甚至翻车…

作者头像 李华
网站建设 2026/3/20 13:09:57

javascript与vue协作完成大附件断点续传功能

《码农的20G文件上传历险记&#xff1a;从IE8到破产边缘》 各位老铁们好啊&#xff01;我是辽宁那个靠PHP续命的码农老王&#xff0c;最近接了个让我怀疑人生的外包需求——用100块钱预算实现20G文件上传系统还得兼容IE8&#xff01;这需求比沈阳冬天的大风还让人凌乱啊&#…

作者头像 李华
网站建设 2026/3/27 15:50:17

康迪科技签约浙江大学，共建智能机器人联合研发中心

2026年1月5日&#xff0c;康迪科技与浙江大学联合宣布&#xff0c;“浙江大学-康迪智能机器人联合研发中心”正式成立。双方在浙大紫金港校区正式签署合作协议并举行揭牌仪式&#xff0c;浙江大学副校长陈刚、联合研发中心主任鲍虎军、康迪科技董事长董学勤、CEO陈峰等双方代表…

作者头像 李华
网站建设 2026/3/30 9:19:24

2026本科生必看！8个降AI率工具测评榜单

2026本科生必看&#xff01;8个降AI率工具测评榜单 2026本科生必看&#xff01;8个降AI率工具测评榜单 在当前高校对学术原创性要求日益严格的背景下&#xff0c;AI生成内容检测技术正变得愈发精准。很多学生在论文查重时遭遇AI率超标的问题&#xff0c;这不仅影响成绩&#x…

作者头像 李华
网站建设 2026/3/11 21:30:41

GLM-4.6V-Flash-WEB模型能否检测图像中的人物关系？

GLM-4.6V-Flash-WEB能否理解图像中的人物关系&#xff1f; 在社交平台每天上传数亿张包含多人互动的照片时&#xff0c;我们早已不满足于“图中有两个人”这样的基础识别。用户真正想知道的是&#xff1a;“他们是什么关系&#xff1f;”“看起来在吵架吗&#xff1f;”“谁是主…

作者头像 李华