企业官网建设流程全解析

前端网站建设插件,google谷歌搜索引擎入口,网页视频怎么下载到电脑上,24小时学会网站建设CMS企业官网Word导入全攻略#xff1a;一个.NET码农的求生之路 兄弟们好#xff01;我是福建某小公司的.NET码农#xff0c;最近接了个CMS企业官网的外包活#xff0c;客户爸爸要求加个Word全家桶一键导入功能#xff0c;还要保留所有妖艳的样式。预算680元封…CMS企业官网Word导入全攻略一个.NET码农的求生之路兄弟们好我是福建某小公司的.NET码农最近接了个CMS企业官网的外包活客户爸爸要求加个Word全家桶一键导入功能还要保留所有妖艳的样式。预算680元封顶这需求简直比让我用ASP.NET WebForm写React还刺激啊技术现状分析已哭晕在厕所前端Vue2 CLI 古董级UEditor后端ASP.NET WebForm是的2023年了还在用这个数据库SQL Server唯一正常的技术选型云服务阿里云ECSOSS感谢马爸爸需求拆解客户要的比相亲对象还多Word/Excel/PPT/PDF导入要保留所有样式包括公式、形状这些磨人的小妖精Word一键粘贴高龄用户友好简单到就像复制粘贴公式支持LaTeX→MathMLMathType公式EMZ/WMZ图片公式公众号导入毕竟客户经常借鉴公众号内容图片自动上传直接传阿里云OSS技术选型预算680元极限操作方案一UEditor插件改造预算0元// 自定义UEditor按钮 - wordImport.jsUE.registerUI(wordimport,function(editor){varbtnnewUE.ui.Button({name:wordimport,title:导入Word,onclick:function(){// 创建文件选择inputvarfileInputUE.utils.createElement(input,{type:file,accept:.docx,.xlsx,.pptx,.pdf});fileInput.addEventListener(change,function(e){varfilee.target.files[0];if(!file)return;// 使用mammoth.js处理Wordif(file.name.endsWith(.docx)){varreadernewFileReader();reader.onloadfunction(e){mammoth.extractRawText({arrayBuffer:e.target.result}).then(function(result){editor.execCommand(insertHtml,result.value);});};reader.readAsArrayBuffer(file);}// 其他文件类型处理...});fileInput.click();}});returnbtn;});方案二TinyMCE专业版预算超支警告虽然TinyMCE的PowerPaste插件完美符合需求但价格够我吃三个月沙县小吃了…终极解决方案白嫖开源自研缝合预算680元刚好前端改造Vue2 UEditor插件安装依赖npminstallmammoth.js pdf-lib pptx2html exceljs katex --save核心代码WordImportPlugin.jsimportmammothfrommammoth;import{PDFDocument}frompdf-lib;importpptx2htmlfrompptx2html;import*asExcelJSfromexceljs;importkatexfromkatex;importkatex/dist/katex.min.css;exportdefaultclassWordImportPlugin{constructor(editor){this.editoreditor;this.init();}init(){// 添加工具栏按钮this.editor.registerButton(wordimport,{title:导入Office文档,onclick:()this.openFileDialog()});// 监听粘贴事件处理Word内容this.editor.addListener(ready,(){this.editor.body.addEventListener(paste,this.handlePaste.bind(this));});}openFileDialog(){constinputdocument.createElement(input);input.typefile;input.accept.docx,.xlsx,.pptx,.pdf,.emz,.wmz;input.onchange(e)this.handleFileUpload(e.target.files[0]);input.click();}asynchandleFileUpload(file){try{lethtmlContent;if(file.name.endsWith(.docx)){constarrayBufferawaitfile.arrayBuffer();constresultawaitmammoth.convertToHtml({arrayBuffer});htmlContentresult.value;}// 其他文件类型处理...// 处理LaTeX公式htmlContentthis.processLatex(htmlContent);// 插入编辑器this.editor.execCommand(insertHtml,htmlContent);// 上传图片到OSSawaitthis.uploadImages(htmlContent);}catch(error){console.error(文件导入失败:,error);}}// 处理粘贴的Word内容asynchandlePaste(e){constitemse.clipboardData.items;for(leti0;iitems.length;i){if(items[i].type.indexOf(text/html)!-1){constblobitems[i].getAsFile();consttextawaitblob.text();this.editor.execCommand(insertHtml,this.cleanWordHtml(text));e.preventDefault();}}}// 清理Word生成的HTMLcleanWordHtml(html){// 各种正则替换处理...returnhtml;}// LaTeX转MathMLprocessLatex(html){returnhtml.replace(/\$\$(.*?)\$\$/g,(match,latex){returnkatex.renderToString(latex,{displayMode:true});});}// 上传图片到阿里云OSSasyncuploadImages(html){// 实现图片上传逻辑...}}后端处理C# WebForm// WordImportHandler.ashx%WebHandlerLanguageC#ClassWordImportHandler%usingSystem;usingSystem.Web;usingAliyun.OSS;usingSystem.IO;publicclassWordImportHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{varfilecontext.Request.Files[file];if(filenull||file.ContentLength0){thrownewException(请选择文件);}// 阿里云OSS配置stringaccessKeyId你的AccessKeyId;stringaccessKeySecret你的AccessKeySecret;stringendpoint你的Endpoint;stringbucketName你的Bucket名称;// 上传文件varossClientnewOssClient(endpoint,accessKeyId,accessKeySecret);stringobjectNameuploads/Guid.NewGuid().ToString()Path.GetExtension(file.FileName);using(varstreamfile.InputStream){ossClient.PutObject(bucketName,objectName,stream);}// 返回文件URLcontext.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successtrue,url$https://{bucketName}.{endpoint}/{objectName}}));}catch(Exceptionex){context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}publicboolIsReusable{get{returnfalse;}}}部署指南简单到就像安装360全家桶前端集成// main.jsimportWordImportPluginfrom./plugins/WordImportPlugin;// UEditor初始化后consteditorUE.getEditor(editor);newWordImportPlugin(editor);后端部署将WordImportHandler.ashx放到网站根目录配置阿里云OSS权限避坑指南血泪教训Word样式问题mammoth.js对复杂表格支持不好建议用cheerio做二次处理公式转换Katex比MathJax轻量但对某些LaTeX语法支持不全性能优化大文件处理要加进度条否则用户以为卡死了安全防护文件上传一定要校验类型和内容别变成黑客后门致富…啊不是技术交流兄弟们我在QQ群223813913等你们群里不仅有定期技术分享如何用WebForm写出React的感觉外包项目对接下次有活一起干职业内推逃离福建小公司指南现在加群还送完整项目源码价值680元的高端缝合代码1-99元随机红包能不能吃上沙县加蛋就看手气了神秘学习资料如何用C#写出Python的感觉P.S. 黄金会员50%提成是真的香我已经靠推荐买了三套深圳湾一号了梦里快来群里一起实现财富自由吧最后说句掏心窝子的话这需求680元真的血亏但谁让我们是老实巴交的.NET程序员呢下次一定要记得先报价再加个零啊兄弟们复制插件目录引入插件文件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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例