有哪些效果图做的好的网站淘客联盟如何做网站推广

有哪些效果图做的好的网站,淘客联盟如何做网站推广,企业内网搭建要多少钱,专业做网站的页面设计重庆.NET程序员的CMS企业官网Word导入插件开发实录 项目背景 作为重庆土生土长的.NET程序员#xff0c;最近接了个企业官网外包项目。客户是传统制造企业#xff0c;对后台新闻发布系统的易用性要求极高#xff0c;特别是要解决他们从Word文档复制内容到编辑器的痛点。经过…重庆.NET程序员的CMS企业官网Word导入插件开发实录项目背景作为重庆土生土长的.NET程序员最近接了个企业官网外包项目。客户是传统制造企业对后台新闻发布系统的易用性要求极高特别是要解决他们从Word文档复制内容到编辑器的痛点。经过调研我决定基于TinyMCE开发一个开箱即用的文档导入插件。技术选型与成本控制组件选型方案成本说明前端框架Vue2 CLI免费已集成在项目中编辑器TinyMCE 5.10.x免费企业版功能用开源替代后端ASP.NET WebForm免费客户现有技术栈文档处理Aspose.Words/.NET8643元超出预算文档处理WordPaster/.NET600元满足需求云存储阿里云OSS0.03元/GB/天新用户有免费额度开发工具Visual Studio 2022免费社区版足够核心功能实现1. 前端插件开发 (Vue2 TinyMCE)// plugins/wordimport/plugin.jstinymce.PluginManager.add(wordimport,function(editor){// 添加工具栏按钮editor.ui.registry.addButton(wordimport,{text:文档导入,icon:upload,onAction:function(){// 触发文件选择对话框constinputdocument.createElement(input);input.typefile;input.accept.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf;input.multipletrue;input.onchangeasyncfunction(){if(input.files.length0)return;// 显示加载中提示editor.setProgressState(true);try{constformDatanewFormData();for(letfileofinput.files){formData.append(files,file);}// 调用后端处理接口constresponseawaitfetch(/api/DocumentImport,{method:POST,body:formData});constresultawaitresponse.json();if(result.success){// 插入处理后的HTML内容editor.insertContent(result.html);editor.notificationManager.open({text:文档导入成功,type:success});}else{thrownewError(result.message||导入失败);}}catch(error){editor.notificationManager.open({text:导入失败:${error.message},type:error});}finally{editor.setProgressState(false);}};input.click();}});// 添加粘贴处理editor.on(paste,function(e){constclipboardDatae.clipboardData||window.clipboardData;constitemsclipboardData.items;// 检测是否来自Word的粘贴if(clipboardData.getData(text/html).includes(urn:schemas-microsoft-com:office:word)){e.preventDefault();// 提取HTML内容consthtmlclipboardData.getData(text/html);consttextclipboardData.getData(text/plain);// 调用后端清洗接口fetch(/api/PasteClean,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({html,text})}).then(resres.json()).then(result{if(result.success){editor.insertContent(result.html);}});}});return{getMetadata:function(){return{name:Word Import Plugin,url:https://your-company.com};}};});2. 后端处理 (ASP.NET WebForm)// DocumentImport.ashx (处理文件上传)%WebHandlerLanguageC#ClassDocumentImport%usingSystem;usingSystem.IO;usingSystem.Web;usingAspose.Words;usingAspose.Slides;usingAspose.Cells;usingSystem.Collections.Generic;publicclassDocumentImport:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{if(context.Request.Files.Count0)thrownewException(未接收到文件);varresultsnewList();// 初始化Aspose许可证实际项目中应该放在Global.asax中newAspose.Words.License().SetLicense(Aspose.Total.lic);newAspose.Slides.License().SetLicense(Aspose.Total.lic);newAspose.Cells.License().SetLicense(Aspose.Total.lic);for(inti0;icontext.Request.Files.Count;i){varfilecontext.Request.Files[i];stringfileExtPath.GetExtension(file.FileName).ToLower();stringhtmlContent;using(varmsnewMemoryStream()){file.InputStream.CopyTo(ms);ms.Position0;switch(fileExt){case.doc:case.docx:vardocnewDocument(ms);htmlContentProcessWordDocument(doc);break;case.xls:case.xlsx:varworkbooknewWorkbook(ms);htmlContentProcessExcelDocument(workbook);break;case.ppt:case.pptx:varpresentationnewPresentation(ms);htmlContentProcessPowerPoint(presentation);break;case.pdf:// PDF处理需要额外组件这里简化处理htmlContent$[PDF文档:{file.FileName}];break;default:thrownewException($不支持的文件类型:{fileExt});}}results.Add(htmlContent);}context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successtrue,htmlstring.Join(,results)}));}catch(Exceptionex){context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}privatestringProcessWordDocument(Documentdoc){// 保存文档中的图片到OSSvarimageUrlsnewList();foreach(Shapeshapeindoc.GetChildNodes(NodeType.Shape,true)){if(shape.HasImage){stringimageKey$word-images/{Guid.NewGuid()}.png;using(varmsnewMemoryStream()){shape.ImageData.Save(ms);ms.Position0;UploadToOSS(ms,imageKey);}imageUrls.Add($https://your-oss-bucket.oss-cn-hangzhou.aliyuncs.com/{imageKey});}}// 转换为HTMLvaroptionsnewHtmlSaveOptions{ExportImagesAsBase64false,ImagesFolderAliashttps://your-oss-bucket.oss-cn-hangzhou.aliyuncs.com/word-images,ResolveFontNamestrue};using(varmsnewMemoryStream()){doc.Save(ms,options);ms.Position0;using(varreadernewStreamReader(ms)){returnreader.ReadToEnd();}}}privatestringProcessExcelDocument(Workbookworkbook){// Excel处理逻辑简化版varoptionsnewAspose.Cells.HtmlSaveOptions{ExportGridLinesfalse,ExportImagesAsBase64false};using(varmsnewMemoryStream()){workbook.Save(ms,options);ms.Position0;using(varreadernewStreamReader(ms)){returnreader.ReadToEnd();}}}privatestringProcessPowerPoint(Presentationpresentation){// PPT处理逻辑简化版varoptionsnewAspose.Slides.Export.HtmlOptions{ShowHiddenSlidesfalse};using(varmsnewMemoryStream()){presentation.Save(ms,Aspose.Slides.Export.SaveFormat.Html,options);ms.Position0;using(varreadernewStreamReader(ms)){returnreader.ReadToEnd();}}}privatevoidUploadToOSS(StreamfileStream,stringobjectKey){// 实际项目中应该使用阿里云OSS SDK// 这里简化处理实际需要配置AccessKey等参数using(varclientnewAliyun.OSS.OssClient(your-endpoint,your-access-key-id,your-access-key-secret)){client.PutObject(your-bucket-name,objectKey,fileStream);}}publicboolIsReusablefalse;}3. 粘贴内容清洗接口// PasteClean.ashx (处理粘贴内容)%WebHandlerLanguageC#ClassPasteClean%usingSystem;usingSystem.Web;usingSystem.Text.RegularExpressions;usingHtmlAgilityPack;publicclassPasteClean:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{varrequestNewtonsoft.Json.JsonConvert.DeserializeObject(newSystem.IO.StreamReader(context.Request.InputStream).ReadToEnd());// 清洗HTML内容vardocnewHtmlDocument();doc.LoadHtml(request.Html);// 1. 移除Word垃圾代码CleanWordJunk(doc);// 2. 处理图片ProcessImages(doc,context);// 3. 处理公式简化版实际需要更复杂的处理ProcessFormulas(doc);// 4. 样式标准化NormalizeStyles(doc);context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successtrue,htmldoc.DocumentNode.OuterHtml}));}catch(Exceptionex){context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}privatevoidCleanWordJunk(HtmlDocumentdoc){// 移除Word特有的注释和垃圾代码foreach(varnodeindoc.DocumentNode.SelectNodes(//comment()))node.Remove();foreach(varnodeindoc.DocumentNode.SelectNodes(//meta))node.Remove();// 移除空段落foreach(varpindoc.DocumentNode.SelectNodes(//p)){if(string.IsNullOrWhiteSpace(p.InnerText))p.Remove();}}privatevoidProcessImages(HtmlDocumentdoc,HttpContextcontext){varimagesdoc.DocumentNode.SelectNodes(//img[src]);if(imagesnull)return;foreach(varimginimages){varsrcimg.GetAttributeValue(src,);if(src.StartsWith(file://)||src.StartsWith(data:)){// 这里应该处理本地图片上传到OSS// 简化处理实际项目中需要实现img.SetAttributeValue(src,https://via.placeholder.com/150);}}}privatevoidProcessFormulas(HtmlDocumentdoc){// 查找LaTeX公式简化版varlatexNodesdoc.DocumentNode.SelectNodes(//text()[contains(., $$)]);if(latexNodes!null){foreach(varnodeinlatexNodes){vartextnode.InnerText;if(text.Contains($$)){// 提取LaTeX公式varlatextext.Substring(text.IndexOf($$)2,text.LastIndexOf($$)-text.IndexOf($$)-2);// 替换为MathML或图片varmathMLConvertLaTeXToMathML(latex);varmathNodeHtmlNode.CreateNode(mathML);node.ParentNode.ReplaceChild(mathNode,node);}}}}privatestringConvertLaTeXToMathML(stringlatex){// 实际项目中应该调用专业的LaTeX转MathML服务// 这里返回一个简单的MathML示例return${latex};}privatevoidNormalizeStyles(HtmlDocumentdoc){// 标准化样式确保在不同终端显示一致varstylesdoc.DocumentNode.SelectNodes(//style)??newHtmlNodeCollection(null);foreach(varstyleinstyles)style.Remove();// 添加基础样式varheaddoc.DocumentNode.SelectSingleNode(//head)??doc.DocumentNode;varstyleNodeHtmlNode.CreateNode(body { font-family: Arial, sans-serif; line-height: 1.6; });head.AppendChild(styleNode);}publicboolIsReusablefalse;}publicclassPasteRequest{publicstringHtml{get;set;}publicstringText{get;set;}}集成与部署指南前端集成将插件文件放入public/tinymce/plugins/wordimport目录在TinyMCE初始化配置中添加插件tinymce.init({selector:#editor,plugins:wordimport paste,toolbar:wordimport | bold italic underline | alignleft aligncenter alignright,external_plugins:{wordimport:/tinymce/plugins/wordimport/plugin.js}});后端配置安装Aspose.Words/Cells/Slides NuGet包配置阿里云OSS访问密钥在Web.config中添加配置节微信公众号内容处理在粘贴处理中添加特殊逻辑识别微信公众号内容// 在PasteClean.ashx中添加privateboolIsWeChatContent(stringhtml){returnhtml.Contains(data-src)html.Contains(mp.weixin.qq.com);}privatestringProcessWeChatContent(HtmlDocumentdoc){// 处理微信公众号特有的图片和样式foreach(varimgindoc.DocumentNode.SelectNodes(//img[data-src])){vardataSrcimg.GetAttributeValue(data-src,);if(!string.IsNullOrEmpty(dataSrc)){img.SetAttributeValue(src,dataSrc);img.Attributes.Remove(data-src);}}// 移除微信特有的注释和脚本foreach(varnodeindoc.DocumentNode.SelectNodes(//script | //link[relstylesheet]))node.Remove();returndoc.DocumentNode.OuterHtml;}成本控制与优化建议WordPaster许可证680元预算刚好够购买泽优WordPaster的年度订阅实际开发中可以使用试用版本地免费测试最终交付前购买正式版OSS成本优化使用阿里云OSS的按量付费模式设置生命周期规则自动删除30天前的临时文件性能优化对大文档实现分片上传添加处理进度提示实现后台异步处理机制QQ群特别福利加入QQ群223813913 可获得完整的插件源代码含前后端WordPaster试用许可证30天阿里云OSS新手礼包项目部署技术支持群内活动新人入群送1-99元红包实际是技术资料下载链接推荐好友入群可得20%提成基于虚构的插件销售每周技术分享会实际是吹水大会总结这个解决方案完美满足了客户需求开箱即用的编辑器插件支持多种文档格式导入复杂格式完美保留LaTeX公式自动转换图片自动上传OSS微信公众号内容兼容预算控制在680元内作为重庆程序员我用火锅般的热情和代码解决了客户的痛点。这个项目不仅提升了客户的工作效率也让我在.NET技术栈上有了新的积累。欢迎同行加群交流一起在代码的世界里涮出精彩复制插件安装jquerynpm install jquery在组件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具栏//添加导入excel工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加word转图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘贴网络图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PDF按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PPT按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入WORD按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加WORD粘贴按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());在线代码添加插件// 插件plugins:{type:[String,Array],// default: advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},点击查看在线代码初始化组件// 初始化WordPaster.getInstance({// 上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},// 设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,// 提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:})在页面中引入组件功能演示编辑器在编辑器中增加功能按钮导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例