核心内容摘要
《图书馆的女朋友》第一季第01集：在书香与高清画质中，遇见那份
贵州PHP程序员的CMS编辑器插件大冒险嘿各位技术大佬们好我是贵州山沟沟里爬出来的PHP程序员老王最近接了个CMS企业官网的外包项目客户爸爸提出了个变态需求——要在UEditor里实现Word/Excel/PPT/PDF一键导入还要保留各种花里胡哨的格式连LaTeX公式都要支持这需求简直比让我用脚写代码还难啊需求分析老板版客户说“我们公司那些50多岁的领导用Word写个新闻稿都要折腾半天现在要他们学Markdown不如让他们去造火箭你们程序员不就是干这个的吗给我搞个一键粘贴功能要像微信复制粘贴那么简单”技术选型穷鬼版前端Vue3 CLI白嫖的编辑器UEditor百度开源的不要钱后端PHP我的老伙计存储阿里云OSS老板说超过100块就让我用自家硬盘预算680元够买两箱泡面一箱红牛解决方案山寨版前端部分Vue3插件// src/plugins/ueditor-word-import.jsexportdefault{install(app,options){// 注册UEditor插件按钮UE.registerUI(wordimport,function(editor,uiName){constbtnnewUE.ui.Button({name:uiName,title:Word导入,cssRules:background-position: -726px -77px;,onclick:function(){// 调用后端APIconstinputdocument.createElement(input);input.typefile;input.accept.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf;input.onchangeasync(e){constfilee.target.files[0];if(!file)return;constformDatanewFormData();formData.append(file,file);try{constresawaitfetch(/api/ueditor/import,{method:POST,body:formData});constdataawaitres.json();if(data.success){editor.execCommand(insertHtml,data.content);}else{alert(导入失败data.msg);}}catch(err){alert(网络错误err.message);}};input.click();}});editor.addListener(ready,function(){editor.registerButton(uiName,btn);});returnbtn;},
;}}后端部分PHP处理// api/ueditor/import.phpyour-access-key,accessKeySecretyour-secret-key,endpointoss-cn-hangzhou.aliyuncs.com,bucketyour-bucket-name];// 接收文件if(!isset($_FILES[file])){die(json_encode([successfalse,msg没有上传文件]));}$file$_FILES[file];$tmpPath$file[tmp_name];$fileName$file[name];$fileExtstrtolower(pathinfo($fileName,PATHINFO_EXTENSION));// 简单验证文件类型$allowedTypes[doc,docx,xls,xlsx,ppt,pptx,pdf];if(!in_array($fileExt,$allowedTypes)){die(json_encode([successfalse,msg不支持的文件类型]));}// 使用Mammoth.js处理Word实际项目中应该用PHP库这里简化处理// 实际项目中建议使用PHPWord、PHPExcel等库functionconvertWordToHtml($filePath){// 这里应该是调用PHP库处理Word的代码// 由于预算有限我们假装已经处理好了...return转换后的标题这里是转换后的内容;}// 处理LaTeX公式简化版functionconvertLatexToMathml($latex){// 实际应该用专业库处理这里只是示例$mathml..htmlspecialchars($latex)..;return$mathml;}// 模拟处理过程$content;switch($fileExt){casedoc:casedocx:$contentconvertWordToHtml($tmpPath);// 替换模拟的LaTeX公式$contentpreg_replace_callback(/\\\$(.?)\\\$/,function($matches){returnconvertLatexToMathml($matches[1]);},$content);break;// 其他文件类型处理...default:$content暂不支持此文件类型的完整转换;}// 上传图片到OSS简化版functionuploadToOss($filePath,$originalName){global$config;try{$ossClientnewOssClient($config[accessKeyId],$config[accessKeySecret],$config[endpoint]);$objectueditor/.uniqid()._.basename($originalName);$ossClient-uploadFile($config[bucket],$object,$filePath);returnhttps://.$config[bucket]...$config[endpoint]./.$object;}catch(OssException$e){returnfalse;}}// 模拟图片处理实际项目中需要遍历HTML提取图片$content.;echojson_encode([successtrue,content$content]);?部署方案穷鬼版买台阿里云ECS最便宜的服务器99元/年安装宝塔面板免费上传代码到网站目录配置Nginx反向代理申请免费SSL证书Let’s Encrypt泡杯茶等待客户验收群主の野望各位大佬看到这个项目是不是觉得很有前途现在加入我的QQ群223813913不仅能免费领取
元红包绝对不坑获得20%推荐提成躺着赚钱参与技术讨论吹牛不上税获取外包项目真·有钱一起赚算笔账推荐10个客户 2000元提成推荐100个客户 20000元提成推荐1000个客户 200000元提成够在贵阳买套房了这比996香多了吧赶紧加群错过这村就没这店了免责声明以上代码为简化示例实际项目中需要添加完善的错误处理实现真正的文件格式转换加强安全性验证优化性能添加单元测试但谁让咱们预算只有680元呢能跑起来就行要啥自行车复制插件目录引入插件文件UEditor
1.
4.
3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-
4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos
,asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。
ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。
ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。
或取消权限验证。
参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例