核心内容摘要
探索“油管18十”的无限可能：你所不知道的精彩世界
震惊Word一键粘贴插件竟被我600块拿下各位群里的老铁们好啊作为一个在山东搬砖多年的PHP老鸟今天要给大家分享一个白菜价搞定高大上Word粘贴功能的骚操作需求分析客户要的这功能说白了就是让老大爷们能像在Word里一样随便复制粘贴能把Word/Excel/PPT/PDF直接拖进去还能保持原样公式要能自动转成手机也能看的高级格式公众号文章也能直接搬过来技术选型经过我三天三夜不眠不休的调研其实就是在群里问了问发现市面上那些开源方案都是❌ 公式支持稀烂❌ 样式保留不全❌ 价格贵得离谱最后我锁定了两个方案方案一国产良心插件优点全中文文档、客服秒回、支持定制价格基础版599元刚好在预算内缺点UI有点土方案二国外高端货优点界面酷炫、功能全面价格999美元老板看到直接把我开除了缺点文档全英文客服在睡觉时区代码实现前端部分Vue2 UEditor// 在UEditor配置中增加按钮UE.registerUI(wordpaste,function(editor){// 创建一个按钮varbtnnewUE.ui.Button({name:wordpaste,title:Word一键粘贴,cssRules:background-image: url(word.png) no-repeat;,onclick:function(){// 调用粘贴功能editor.execCommand(wordpaste);}});returnbtn;});// 粘贴处理逻辑UE.plugins.wordpastefunction(){this.addListener(ready,function(){// 监听粘贴事件this.addListener(afterpaste,function(type,pasteData){if(pasteData.html){// 处理Word粘贴内容constcleanHtmlthis.wordFilter(pasteData.html);this.execCommand(insertHtml,cleanHtml);}});});// Word内容过滤器this.wordFilterfunction(html){// 这里处理各种Word特有的标签和样式returnhtml.replace(/|\/o:p/g,).replace(/classMsoNormal/g,).replace(/\s*\/span/g, );};};后端部分PHPuploadImages($content);//
转换公式$content$this-convertFormulas($content);//
清理特殊标签$content$this-cleanTags($content);return$content;}privatefunctionuploadImages($content){// 正则匹配所有图片preg_match_all(/]src([^])/,$content,$matches);foreach($matches[1]as$imgUrl){if(strpos($imgUrl,data:image)
{// 处理base64图片$newUrl$this-uploadBase64Image($imgUrl);$contentstr_replace($imgUrl,$newUrl,$content);}}return$content;}privatefunctionconvertFormulas($content){// 转换LaTeX公式为MathML$contentpreg_replace_callback(/\$(.*?)\$/,function($matches){return$this-latexToMathML($matches[1]);},$content);return$content;}privatefunctioncleanTags($content){// 移除Word特有的垃圾标签$badTags[/|\/o:p/,//,//,//];returnpreg_replace($badTags,,$content);}}?集成步骤下载插件包从官网下载wordpaste.zip解压到UEditor的plugins目录修改配置// ueditor.config.js{toolbars:[[wordpaste,source,undo,redo,bold]],wordpasteConfig:{uploadUrl:/api/upload,formulaServer:https://formula.example.com/convert}}后端接口// 文件上传接口$router-post(/api/upload,function(){$file$_FILES[file];$ossClientnewOSS\OssClient(getenv(OSS_ACCESS_KEY_ID),getenv(OSS_ACCESS_KEY_SECRET),getenv(OSS_ENDPOINT));try{$result$ossClient-uploadFile(getenv(OSS_BUCKET),uploads/.uniqid()...pathinfo($file[name],PATHINFO_EXTENSION),$file[tmp_name]);echojson_encode([url$result[info][url]]);}catch(OssException$e){http_response_code(
;echojson_encode([error$e-getMessage()]);}});效果展示成本核算项目价格插件授权599元服务器费用50元/月开发工时0元因为是我自己写的总计649元老板给了680预算还剩下31块够我买包烟庆祝一下了群福利再强调兄弟们加群223813913领红包啊新人红包
元随机推荐客户拿20%提成10个客户4万提成躺着赚钱不是梦最后说一句这插件真香谁用谁知道复制插件目录引入插件文件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转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例