企业官网建设流程全解析

一键免费做网站,网站建设步骤和流程,影院wordpress主题,建设网站的页面设计咱就是说#xff0c;最近在安徽当前端程序员的我#xff0c;头发快被甲方爸爸的需求薅秃了——刚接了个CMS企业官网外包#xff0c;结果客户又扔来个“王炸需求”#xff1a;要在UEditor里加Word/Excel/PPT/PDF导入功能#xff0c;还要支持一键粘贴Word、Latex转MathML、图…咱就是说最近在安徽当前端程序员的我头发快被甲方爸爸的需求薅秃了——刚接了个CMS企业官网外包结果客户又扔来个“王炸需求”要在UEditor里加Word/Excel/PPT/PDF导入功能还要支持一键粘贴Word、Latex转MathML、图片自动上传重点是得“开箱即用”别整太复杂咱先捋捋这需求多离谱不是高龄用户要友好意味着操作得简单到“傻瓜式”要保留Word里的花里胡哨样式字体颜色、形状组、MathType公式还得把Latex公式转成MathML让手机平板都高清显示最坑的是网上开源插件要么不支持emz/wmz格式要么连Latex都认不出来踩了一圈坑头发掉一把……得既然开源不给力咱决定自己整活但一个人搞太费劲于是拉了个QQ群223813913喊上同行一起头脑风暴——毕竟“三个臭皮匠顶个诸葛亮”还能组个“技术互助搭子”顺便接点私活分提成美滋滋群里现在已经攒了小几十号人有做前端的、后端的还有专门研究文档解析的大佬。咱目标很明确搞个UEditor插件集成导入粘贴功能让客户点个按钮就能把Word里的内容“唰”地拽进编辑器图片自动传服务器Latex秒变MathML多终端显示不崩附赠部分“搬砖”源码掏家底了1. 前端Vue3集成UEditor自定义导入按钮UEditor虽老但架不住咱会“魔改”// 在Vue组件里初始化UEditor添加“导入文档”按钮importUEfromueditorexportdefault{mounted(){this.initEditor()},methods:{initEditor(){// 初始化UEditor工具栏加自定义按钮consteditorUE.getEditor(newsEditor,{toolbars:[[bold,link],[importDoc]]// 新增importDoc按钮})// UEditor准备好后注册自定义按钮editor.addListener(ready,(){UE.registerUI(importDoc,(editor,uiName){constbtnnewUE.ui.Button({name:uiName,title:导入Word/PPT/Excel/PDF 或 粘贴Word内容,cssRules:background-color: #409eff;color: white;,onclick:(){// 弹出文件选择框支持主流文档格式constinputdocument.createElement(input)input.typefileinput.accept.doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf,.txt// 点击文件后处理上传/解析input.onchangeasync(e){constfilee.target.files[0]if(!file)return// 调用上传接口后端给的constresawaitthis.uploadFile(file)if(res.success){// 把解析后的内容含图片、样式插入编辑器editor.execCommand(insertHtml,res.content)alert(导入成功头发又保住了一根)}else{alert(导入失败res.msg)}}input.click()// 触发文件选择}})returnbtn})})// 监听粘贴事件重点处理Word一键粘贴editor.addListener(beforepaste,(type,data){consthtmldata.html// 提取Word里的图片base64转服务器地址constnewHtmlhtml.replace(/{// 上传base64图片到服务器constresawaitthis.uploadBase64Image(base64,fmt)returnres.success?:match})data.htmlnewHtml// 替换为新内容})},// 上传普通文件Word/PPT等asyncuploadFile(file){constformDatanewFormData()formData.append(file,file)try{constresawaitfetch(/api/upload/doc,{method:POST,body:formData})returnawaitres.json()}catch(err){return{success:false,msg:网络错误}}},// 上传base64图片Word里的嵌入图asyncuploadBase64Image(base64Str,fmt){constformDatanewFormData()formData.append(file,data:image/${fmt};base64,${base64Str})try{constresawaitfetch(/api/upload/image,{method:POST,body:formData})returnawaitres.json()}catch(err){return{success:false,msg:图片上传失败}}},// 从img标签提取样式保留Word里的字体、颜色等getStyleFromImgTag(imgTag){conststyleMatchimgTag.match(/style(.*?)/)returnstyleMatch?styleMatch[1]:}}}2. 后端ASP.NET Core上传接口客户服务器用IIS刚好兼容简单粗暴主打一个“能跑”// UploadController.cs[ApiController][Route(api/[controller])]publicclassUploadController:ControllerBase{privatereadonlyIWebHostEnvironment_env;publicUploadController(IWebHostEnvironmentenv){_envenv;// 从注入获取环境变量用于存图片路径}// 上传文档/图片接口支持Word、PDF、图片等[HttpPost][Route(doc)]// 对应前端/api/upload/docpublicasyncTaskUploadDoc(IFormFilefile){if(filenull||file.Length0)returnJson(new{successfalse,msg文件不能为空});// 生成唯一文件名防重名varfileName${Guid.NewGuid()}{Path.GetExtension(file.FileName)};varsavePathPath.Combine(_env.WebRootPath,uploads,fileName);// 存到wwwroot/uploads// 写入服务器using(varstreamnewFileStream(savePath,FileMode.Create)){awaitfile.CopyToAsync(stream);}// 返回前端可访问的URLIIS部署的话路径是http://域名/uploads/文件名varfileUrl${Request.Scheme}://{Request.Host}/uploads/{fileName};returnJson(new{successtrue,urlfileUrl,content});// 文档内容解析后续补}// 上传Word里的base64图片[HttpPost][Route(image)]// 对应前端/api/upload/imagepublicasyncTaskUploadImage(IFormFilefile){if(filenull||file.Length0)returnJson(new{successfalse,msg图片不能为空});varfileName${Guid.NewGuid()}.png;// 统一转pngvarsavePathPath.Combine(_env.WebRootPath,uploads,fileName);using(varstreamnewFileStream(savePath,FileMode.Create)){awaitfile.CopyToAsync(stream);}varimageUrl${Request.Scheme}://{Request.Host}/uploads/{fileName};returnJson(new{successtrue,urlimageUrl});}}3. Latex转MathML用mathjax-node前端/后端都能跑客户要MathType公式变MathML这波稳了// 安装依赖npm install mathjax-nodeconstmjAPIrequire(mathjax-node);mjAPI.config({MathJax:{SVG:{font:TeX}}});mjAPI.start();// 转换函数前端粘贴Word里的Latex公式时调用asyncfunctionlatexToMathML(latexStr){returnnewPromise((resolve,reject){mjAPI.typeset({math:latexStr,format:TeX,output:mathml,linebreaks:false},(data){if(!data.errors){resolve(data.mathml);// 返回MathML字符串}else{reject(Latex转换失败data.errors.join(, ));}});});}// 示例把Word里的Emc²转成MathMLlatexToMathML(Emc^2).then(mathml{console.log(mathml);// 输出Emc2})最后唠唠群里福利项目前景咱这QQ群223813913现在新人加群直接送1-99元红包推荐客户成交拿20%提成——比如客户掏1000块你躺赚200一年推10个就是4万提成比在厂里上班香多了群里还搞内推工作大厂机会管够、技术交流文档解析、UEditor魔改、Latex转换随便聊平时还能一起吐槽甲方爸爸的“离谱需求”这需求真不是“伪需求”——政府网站、企业官网、学校官网哪个不需要发新闻哪个不抄Word咱这插件要是做出来妥妥的“刚需神器”市场大到能跑马所以兄弟姐妹们赶紧加群一起搞钱一起秃一起当“前端大佬” 对了群里还有隐藏福利偶尔发点“甲方迷惑行为大赏”专治不开心复制插件目录引入插件文件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转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例