当今做网站的流行顺德网站建设怎么样

当今做网站的流行,顺德网站建设怎么样,电子商务网站模板页面,企业品牌网站建设我们的优势咱安徽程序员实锤了#xff01;最近接了个CMS外包活#xff0c;客户是做企业官网的#xff0c;非要给后台新闻编辑器加“文档导入Word一键粘贴”功能——好家伙#xff0c;需求单写着“要保留Word里的花里胡哨样式#xff0c;图片、公式、甚至MathType的鬼画符都得给我原模…咱安徽程序员实锤了最近接了个CMS外包活客户是做企业官网的非要给后台新闻编辑器加“文档导入Word一键粘贴”功能——好家伙需求单写着“要保留Word里的花里胡哨样式图片、公式、甚至MathType的鬼画符都得给我原模原样塞进文章里高龄编辑用着得比我妈用微信视频还顺溜”。咱先捋捋客户痛点他们编辑部有个大爷70岁的人打字比蜗牛爬发篇新闻得先在Word里捣鼓两小时排版再复制粘贴到后台结果图片全乱码公式变乱码气得大爷拍桌子“这破系统还不如我用钢笔写稿子” 所以客户要的哪是功能是要“让大爷也能轻松发新闻”的救命神器啊第一步摸透UEditor的“脾气”咱前端用的是Vue3编辑器是百度那老古董UEditor——好处是文档全坏处是扩展起来像拆盲盒。要在工具栏加按钮行先改ueditor.config.js把“导入文档”按钮塞进去// ueditor.config.js 里加按钮配置UE.Editor.prototype._bkGetActionUrlUE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrlfunction(action){if(actionuploadword||actionpastehtml){// 自定义接口return/api/editor/handleDoc;// 后端接口地址}else{returnthis._bkGetActionUrl.call(this,action);}};// 工具栏添加按钮在toolbars数组里加toolbars:[[bold,italic,underline,insertimage,uploadword]// 新增uploadword按钮]前端点击按钮后触发文件选择或粘贴事件。粘贴的话得监听paste事件把剪贴板里的Word内容捞出来import { onMounted } from vue; const ue ref(null); onMounted(() { ue.value UE.getEditor(editor, { serverUrl: /api/editor/upload, // 原图上传接口 }); // 监听粘贴事件 ue.value.addListener(paste, (type, event) { const clipboardData event.clipboardData || window.clipboardData; if (clipboardData.items) { for (let i 0; i clipboardData.items.length; i) { const item clipboardData.items[i]; if (item.kind file item.type.startsWith(image/)) { // 处理粘贴的图片后面讲上传OSS } else if (item.kind string) { // 处理文本内容含样式 item.getAsString((text) { ue.value.execCommand(insertHtml, text); // 直接插入带样式的HTML }); } } } }); // 自定义按钮点击事件上传Word UE.registerUI(uploadword, (editor, uiName) { const btn new UE.ui.Button({ name: uiName, title: 导入Word/PPT/Excel, onclick: () { const input document.createElement(input); input.type file; input.accept .doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf; input.onchange async (e) { const file e.target.files[0]; if (file) { const formData new FormData(); formData.append(file, file); const res await fetch(/api/editor/handleDoc, { method: POST, body: formData, }); const html await res.json(); editor.execCommand(insertHtml, html.content); // 把解析后的内容塞进编辑器 } }; input.click(); }, }); return btn; }); });第二步后端PHP“暴力”解析文档前端搞定了后端得硬刚各种文档格式。客户要保留图片、公式咱得找个能“拆文档”的库——PhpWord能读Word但Excel/PPT得用PhpSpreadsheet和PhpPresenterPDF用TCPDF或Smalot/pdfparser。不过最头疼的是公式和样式Word里的公式可能是图片emz/wmz或者Latex得扒出来转成MathML。先写个接收文件的接口/api/editor/handleDoc// PHP后端接口publicfunctionhandleDoc(Request$request){$file$request-file(file);$ext$file-getClientOriginalExtension();$html;switch($ext){casedocx:$html$this-parseWord($file);break;casepdf:$html$this-parsePdf($file);break;// 其他格式类似...}// 图片上传OSS阿里云SDK$html$this-uploadImagesToOSS($html);// Latex转MathML用LaTeXML工具$html$this-convertLatexToMathML($html);returnjson([code200,content$html]);}privatefunctionparseWord($file){requirevendor/autoload.php;// 引入Composer库$phpWord\PhpOffice\PhpWord\IOFactory::load($file-getPathname());$htmlWriternew\PhpOffice\PhpWord\Writer\HTML($phpWord);return$htmlWriter-getContent();// 这里能拿到带样式的HTML但公式可能丢失}图片处理Word里的图片会被解析成base64或临时文件得上传到OSS。用阿里云OSS SDK的话大概是这样useOSS\OssClient;useOSS\Core\OssException;privatefunctionuploadImagesToOSS($html){$ossClientnewOssClient(AccessKeyId,AccessKeySecret,oss-cn-hangzhou.aliyuncs.com);$bucketyour-bucket;$pattern/ $base64) { $imageData base64_decode($base64); $object news-images/ . uniqid() . . . $matches[1][$index]; // OSS路径 try { $ossClient-putObject($bucket, $object, $imageData); $html str_replace($matches[0][$index], srchttps://your-bucket.oss-cn-hangzhou.aliyuncs.com/ .$object. ,$html);}catch(OssException$e){error_log(上传失败.$e-getMessage());}}return$html;}Latex转MathML用LaTeXML命令行工具得服务器装或者用PHP库latex2mathmlprivatefunctionconvertLatexToMathML($html){$latexPattern/\$$(.*?)\$/s;// 匹配$$...$$的Latex公式preg_replace_callback($latexPattern,function($matches){$latex$matches[1];$mathmlshell_exec(latexit -c {$latex});// 假设服务器装了latexitreturn$mathml?{$mathml}:$matches[0];},$html);return$html;}第三步微信公众号内容“偷梁换柱”客户还想要公众号导入那简单——公众号复制的内容自带一堆冗余标签比如咱写个过滤函数privatefunctioncleanWechatHtml($html){$domnewDOMDocument();$dom-loadHTML(mb_convert_encoding($html,HTML-ENTITIES,UTF-8));// 移除无用标签$xpathnewDOMXPath($dom);foreach($xpath-query(//span[contains(class, rich_media_meta)])as$node){$node-parentNode-removeChild($node);}// 保留关键样式比如加粗、颜色foreach($xpath-query(//*[style])as$node){$style$node-getAttribute(style);$stylepreg_replace(/(font-family|line-height):[^;];?/,,$style);// 移除可能冲突的样式$node-setAttribute(style,trim($style));}return$dom-saveHTML();}预算680块够不够咱用的都是开源库PhpWord、PhpSpreadsheet、阿里云OSS SDK服务器装个LaTeXML工具免费前端Vue3改改按钮后端PHP写几个解析函数——680块够买杯奶茶庆祝了要是客户要更复杂的公式支持比如MathType最多花200块买个商业解析库剩下的钱还能给群里兄弟发红包~最后群里喊一嗓子咱建的QQ群223813913新人进群送1-99元红包推荐客户提20%提成成交10单就是4万提成比在厂里打螺丝香多了群里还有一堆技术大佬遇到问题甩个表情包分分钟有人帮你解决~PS大爷看了咱的编辑器拍着大腿说“比我家那台老电脑还顺手”客户当场签了续单合同——这钱赚得值复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.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,pos1),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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例