xhEditor导入word文档自动上传图片

作为一名山西PHP程序员的外包奇遇记

大家好！我是来自山西的一名PHP程序员，最近刚接了个CMS企业官网的外包项目，客户突然甩来个"豪华套餐"需求——要在后台编辑器里加一堆高大上的文档导入功能。

客户需求大揭秘

客户要求：

• Word一键粘贴（高龄用户福音）
• 支持Word/Excel/PPT/PDF导入（保留所有花里胡哨的样式）
• LaTeX公式自动转MathML（数学老师狂喜）
• 微信公众号内容导入（新媒体小编必备）
• 图片自动上传到阿里云OSS（省心省力）

预算？680元！你没看错，不是6800，不是68000，就是680！这价格让我想起了我们山西的特色——刀削面，量大实惠！

技术选型血泪史

我评估了一圈开源产品，发现它们对emz/wmz格式公式图片的支持，就像我对女朋友的心思一样——完全猜不透！LaTeX公式支持？不存在的！

前端：Vue3 CLI + xhEditor
后端：PHP（Zend Studio开发）
数据库：MySQL
服务器：阿里云ECS + OSS

解决方案：自己动手丰衣足食

既然现成的都不行，那就自己撸一个插件吧！下面分享部分代码：

前端部分 (Vue3)

// Word粘贴组件consthandleWordPaste=(e)=>{constitems=(e.clipboardData||window.clipboardData).items;letblob=null;for(leti=0;i<items.length;i++){if(items[i].type.indexOf('text/html')!==-1){blob=items[i].getAsFile();break;}}if(blob){constreader=newFileReader();reader.onload=function(event){constwordContent=event.target.result;// 转换Word格式为HTMLconvertWordToHtml(wordContent).then(html=>{editor.insertContent(html);});};reader.readAsText(blob);}};// LaTeX转MathMLconstlatexToMathML=(latex)=>{// 这里可以使用MathJax或KaTeX库returnkatex.renderToString(latex,{throwOnError:false,output:'mathml'});};

后端部分 (PHP)

]+src="([^">]+)"/', $html, $matches); foreach ($matches[1] as $imgSrc) { if (strpos($imgSrc, 'data:image')===0){// 处理base64图片$ossUrl=uploadBase64ImageToOSS($imgSrc);$html=str_replace($imgSrc,$ossUrl,$html);}}return$html;}?>

商业互吹时间

兄弟们！我建了个QQ群：223813913，新人加群送1-99元红包（金额随机，全看手气，比抢春运火车票还刺激）！

群里福利：

• 外包项目共享（有钱大家一起赚）
• 技术交流（从PHP到人生哲学）
• 工作内推（逃离996的诺亚方舟）
• 代理提成20%（躺着赚钱不是梦）

算笔账：推荐一个客户提成200，10个就是2000，100个就是…（计算器呢？）总之，这提成比我们山西老陈醋还酸爽！

最后吐槽

客户预算680元要做出6800元的功能，这让我想起了我们山西的"砍价文化"——“老板，这碗刀削面5块行不行？我给你带10个客户来！”

不过话说回来，这种需求确实常见，政府网站、企业官网都需要。做好了说不定能做成标准化产品，到时候…嘿嘿，群里见！

（悄悄话：其实680预算真的很难做，但谁让我们程序员最擅长的就是把不可能变为可能呢？）

将插件目录复制到项目中

引入插件文件

定义插件图标

初始化插件

在工具栏中添加插件按钮

效果

编辑器

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

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

下载示例

点击下载完整示例