景德镇建设网站手机下载微信电脑版官方免费下载

景德镇建设网站,手机下载微信电脑版官方免费下载,网站建设策划文案,有口碑的常州网站建设.NET程序员的CMS企业官网外包项目奇遇记 第一章#xff1a;项目需求分析与评估 大家好#xff0c;我是老王#xff0c;一个在北京搬砖的.NET程序员。最近接了个CMS企业官网的外包项目#xff0c;本以为是个轻松活#xff0c;没想到客户爸爸提出了个小要求—….NET程序员的CMS企业官网外包项目奇遇记第一章项目需求分析与评估大家好我是老王一个在北京搬砖的.NET程序员。最近接了个CMS企业官网的外包项目本以为是个轻松活没想到客户爸爸提出了个小要求——要在KindEditor编辑器里增加Word/Excel/PPT/PDF导入功能还要支持微信公众号内容导入最重要的是要能完美保留各种公式和样式。需求分析客户爸爸的原话是“我们公司有些高龄领导让他们手动排版简直是要了老命。要是能直接从Word复制粘贴或者导入文档那效率肯定蹭蹭往上涨啊”我仔细看了下需求清单支持Word/Excel/PPT/PDF导入保留图片、字体、颜色、表格等样式特别强调要支持各种公式LaTeX公式数学、物理、化学MathType公式公式图片emz/wmz格式LaTeX要自动转MathML实现多终端高清显示图片自动上传到阿里云OSS集成要简单最好是个插件预算680元以内我擦这预算够买两斤排骨不技术评估我花了三天时间评估了市面上各种解决方案KindEditor原生功能连基本的表格导入都费劲更别说公式了UEditor对Office支持不错但公式支持一般TinyMCE商业版功能强大但预算不够CKEditor同样商业版才支持完整功能各种开源插件不是公式支持差就是样式保留不好最后我发现这需求简直是在挑战人类极限啊680元的预算要买能处理MathType和emz格式的插件这比在北京三环内买别墅还难第二章解决方案探索就在我准备跟客户解释技术不可行的时候我在一个程序员交流群里看到了希望——有人推荐了一个叫DocXConverter的开源库虽然对emz支持一般但配合其他工具或许能行。前端方案Vue3 KindEditor我决定先从前端入手毕竟客户最看重的是使用体验。// src/components/KindEditorPlugin.jsimportKindEditorfromkindeditorimportkindeditor/plugins/upload/upload// 原有上传插件// 自定义插件KindEditor.plugin(docimport,function(K){varselfthis,namedocimport;self.clickToolbar(name,function(){// 创建文件选择对话框varfileInputK();K(body).append(fileInput);fileInput.change(function(e){varfilee.target.files[0];if(!file)return;// 显示加载中self.cmd.selection(true);self.cmd.inserthtml(正在导入文档请稍候...);// 上传到后端处理varformDatanewFormData();formData.append(file,file);fetch(/api/document/import,{method:POST,body:formData,headers:{Authorization:Bearer localStorage.getItem(token)}}).then(responseresponse.json()).then(data{if(data.success){// 插入转换后的HTMLself.cmd.selection(true);self.cmd.inserthtml(data.html);}else{alert(文档导入失败: data.message);}}).catch(error{console.error(Error:,error);alert(文档导入过程中发生错误);})});fileInput.click();});});后端方案ASP.NET WebForms后端处理是重头戏我选择了以下技术组合OpenXML SDK处理Office文档iTextSharp处理PDFPandoc通过命令行转换格式需要服务器安装MathJax处理LaTeX公式// DocumentImportHandler.ashx.cspublicclassDocumentImportHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{varfilecontext.Request.Files[0];varextensionPath.GetExtension(file.FileName).ToLower();stringhtmlContent;switch(extension){case.doc:case.docx:htmlContentProcessWordDocument(file.InputStream);break;default:context.Response.Write({\success\:false,\message\:\不支持的文件格式\});return;}// 上传图片到OSS并替换URL简化版htmlContentUploadImagesToOss(htmlContent);// 处理LaTeX公式转MathMLhtmlContentConvertLatexToMathML(htmlContent);context.Response.Write(${{\success\:true,\html\:\{HttpUtility.JavaScriptStringEncode(htmlContent)}\}});}catch(Exceptionex){context.Response.Write(${{\success\:false,\message\:\{HttpUtility.JavaScriptStringEncode(ex.Message)}\}});}}publicboolIsReusablefalse;}第三章预算危机与解决方案当我估算完开发成本后发现了个严重问题——预算不够啊680元连买个正经的商业插件都不够更别说处理MathType和emz格式这种高级需求了。紧急会议我跟客户开了个视频会议用我毕生所学的PPT技巧做了个专业的演示“张总您看这个需求啊它就像是要用自行车上月球…”客户表情逐渐凝重“但是我们有个创新解决方案”切换到下一页充满火箭的PPT我提出了一个分阶段实施的计划第一阶段680元预算内实现基本Word导入功能支持简单样式字体、颜色、表格图片上传到OSS提供一个文档预处理工具让客户先用Word转HTML再导入第二阶段额外预算集成专业文档处理服务每月约200元完美支持所有公式和复杂格式提供微信公众号内容抓取功能客户听了后表示“小王啊你们年轻人就是有创意这样第一阶段你先做效果好的话第二阶段预算不是问题”代码优化为了在预算内实现基本功能我做了很多取舍使用免费库用OpenXML代替商业库用MathJax处理简单公式性能优化文档处理放在后端避免前端卡顿添加进度提示用户体验提供详细的导入指南错误提示要友好// 优化后的前端代码添加了进度提示和错误处理KindEditor.plugin(docimport,function(K){varselfthis,namedocimport;self.clickToolbar(name,function(){// 创建更友好的对话框vardialogK.dialog({width:500,title:文档导入向导,body:1. 请选择要导入的文档Word/Excel/PPT/PDF2. 复杂格式可能需要手动调整3. 导入大文件可能需要较长时间 准备中...,closeBtn:{name:关闭,click:function(e){dialog.remove();}},yesBtn:{name:开始导入,click:function(e){varfileInputK(#ke-doc-file)[0];varfilefileInput.files[0];// 显示进度条K(#ke-doc-progress).show();K(#ke-doc-status).text(正在上传文件...);varformDatanewFormData();formData.append(file,file);varxhrnewXMLHttpRequest();xhr.open(POST,/api/document/import,true);xhr.setRequestHeader(Authorization,Bearer localStorage.getItem(token));xhr.upload.onprogressfunction(e){if(e.lengthComputable){varpercentCompleteMath.round((e.loaded/e.total)*100);K(#ke-doc-progress-bar).css(width,percentComplete%);K(#ke-doc-status).text(上传中... percentComplete%);}};}}});});});第四章项目交付与反思经过两周的加班加点我终于在预算内完成了基本功能。虽然不能完美处理所有公式和复杂格式但已经能满足客户80%的需求。交付成果前端插件一键导入按钮友好的进度提示错误处理机制后端服务文档处理接口OSS上传功能简单样式转换文档使用指南格式支持说明常见问题解答客户反馈客户试用后表示“比预期的好多了虽然有些复杂公式需要手动调整但已经比以前方便太多了。你们这个解决方案很有创意”经验总结需求管理再奇葩的需求也要冷静分析找出核心痛点预算管理680元做企业级文档处理确实挑战极限但分阶段实施是可行的技术选型不要盲目追求完美满足80%需求的简单方案往往更实用用户体验即使后台处理复杂前端也要保持简单易用第五章加入我们的技术交流群各位同行如果你也在为类似的需求头疼或者有更好的解决方案欢迎加入我们的QQ群223813913。这里有技术交流分享你的解决方案学习别人的经验项目合作我有外包项目会第一时间在群里发布轻松赚钱推荐客户就能拿20%提成升级会员更高达50%红包福利新人加群送1~99元红包想象一下你只需要动动手指推荐客户就能轻松月入过万。这可能是你离财务自由最近的一次机会群内活动预告下周我们将分享如何用680元预算实现企业级文档处理KindEditor高级插件开发技巧阿里云OSS最佳实践不要犹豫立即加入我们开启你的躺赚之旅附录完整代码结构CMSProject/ ├── src/ │ ├── components/ │ │ └── KindEditorPlugin.js # 前端插件代码 │ ├── api/ │ │ └── DocumentImportHandler.ashx # 后端处理接口 │ └── utils/ │ ├── DocumentProcessor.cs # 文档处理工具类 │ └── OssUploader.cs # OSS上传工具类 ├── docs/ │ ├── 使用指南.md │ ├── 格式支持说明.md │ └── 常见问题解答.md └── QQ群福利/ ├── 红包规则.md └── 会员提成制度.md这就是我的CMS企业官网项目奇遇记。记住在IT行业预算从来不是限制而是激发创造力的源泉加入我们的QQ群一起创造更多可能上传工具栏插件文件夹上传插件文件夹控件初始化在head中引入组件文件注意不要重复引入jquery如果您的页面已经引入了jquery这里就不要再引入jquery 1.4了。WordPaster For KindEditor-4.x # 初始化组件 WordPaster.getInstance({ui:{render:wdpst}//目标容器一般为div});设置快捷键将插件添加到工具栏并挂载KindEditor的CtrlV快捷键事件vareditor;KindEditor.ready(function(K){editorK.create(#content1,{items:[wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf,|],afterCreate:function(){WordPaster.getInstance().SetEditor(this);varselfthis;//自定义 Ctrl V 事件。KindEditor.ctrl(self.edit.doc,V,function(){WordPaster.getInstance().Paste();});}});});注意1.如果接口字段名称不是file请配置FileFieldName。点击查看教程2.如果接口返回JSON请配置ImageMatch点击查看教程3.如果接口返回的图片地址没有域名请配置ImageUrl点击查看教程整合效果效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片示例下载下载完整示例