总代理大型网站建设室内装修设计学校哪里好

总代理大型网站建设,室内装修设计学校哪里好,网络规划设计师教程第二版 pdf下载地址,上海网站设计专注乐云seo企业网站后台Word粘贴与导入功能开发方案 方案概述 大家好#xff0c;我是重庆某软件公司的ASP.NET前端工程师#xff0c;最近接到了一个企业网站后台管理系统的增强需求#xff0c;需要在TinyMCE编辑器中增加Word粘贴功能和多格式文档导入功能。经过一番研究和评估#…企业网站后台Word粘贴与导入功能开发方案方案概述大家好我是重庆某软件公司的ASP.NET前端工程师最近接到了一个企业网站后台管理系统的增强需求需要在TinyMCE编辑器中增加Word粘贴功能和多格式文档导入功能。经过一番研究和评估我整理出了完整的解决方案下面分享给大家。需求分析Word粘贴功能从Word复制内容粘贴到编辑器图片自动上传到阿里云OSS多格式导入功能支持Word、Excel、PPT、PDF导入保留样式和图片技术要求前端Vue2 CLI未来升级到Vue3编辑器TinyMCE后端ASP.NET WebForm存储阿里云OSS未来可扩展其他云存储预算2万以内技术实现方案前端实现 (Vue2 TinyMCE插件)1. 创建TinyMCE自定义插件首先我们创建一个名为wordpaste的TinyMCE插件// src/plugins/wordpaste/plugin.jstinymce.PluginManager.add(wordpaste,function(editor){// 添加工具栏按钮editor.ui.registry.addButton(wordpaste,{text:Word粘贴,icon:paste,onAction:function(){// 显示自定义粘贴对话框editor.execCommand(mceWordPaste);}});// 注册自定义命令editor.addCommand(mceWordPaste,function(){// 创建自定义粘贴对话框editor.windowManager.open({title:Word内容粘贴,body:{type:panel,items:[{type:htmlpanel,html:请直接在此处粘贴Word内容CtrlV},{type:textarea,name:wordcontent,multiline:true,minHeight:300}]},buttons:[{type:cancel,text:取消},{type:submit,text:插入,primary:true}],onSubmit:function(api){constcontentapi.getData().wordcontent;processWordContent(editor,content);api.close();}});});// 处理Word内容functionprocessWordContent(editor,html){// 创建临时div来解析HTMLconsttempDivdocument.createElement(div);tempDiv.innerHTMLhtml;// 处理图片constimagestempDiv.querySelectorAll(img);letprocessedCount0;if(images.length0){// 没有图片直接插入内容editor.insertContent(tempDiv.innerHTML);return;}// 显示加载提示editor.setProgressState(true);// 上传所有图片images.forEach((img,index){fetch(img.src).then(resres.blob()).then(blob{constformDatanewFormData();formData.append(file,blob,pasted-image-index.png);// 上传到服务器returnfetch(/api/upload/image,{method:POST,body:formData});}).then(responseresponse.json()).then(data{// 替换图片URLimg.srcdata.url;processedCount;// 所有图片处理完成后插入内容if(processedCountimages.length){editor.insertContent(tempDiv.innerHTML);editor.setProgressState(false);}}).catch(error{console.error(图片上传失败:,error);processedCount;if(processedCountimages.length){editor.insertContent(tempDiv.innerHTML);editor.setProgressState(false);}});});}return{getMetadata:function(){return{name:Word Paste,url:https://yourcompany.com/wordpaste};}};});2. 创建文档导入插件// src/plugins/docimport/plugin.jstinymce.PluginManager.add(docimport,function(editor){editor.ui.registry.addButton(docimport,{text:文档导入,icon:upload,onAction:function(){// 创建导入对话框editor.windowManager.open({title:文档导入,body:{type:panel,items:[{type:dropzone,name:file,label:上传文档,accept:.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf}]},buttons:[{type:cancel,text:取消},{type:submit,text:导入,primary:true}],onSubmit:function(api){constfileInputapi.getData().file;if(!fileInput||!fileInput[0]){editor.notificationManager.open({text:请选择要导入的文件,type:error});return;}constfilefileInput[0];constformDatanewFormData();formData.append(file,file);editor.setProgressState(true);fetch(/api/document/import,{method:POST,body:formData}).then(responseresponse.json()).then(data{if(data.success){editor.insertContent(data.html);api.close();}else{editor.notificationManager.open({text:导入失败: data.message,type:error});}}).catch(error{editor.notificationManager.open({text:导入过程中发生错误: error.message,type:error});}).finally((){editor.setProgressState(false);});}});}});});3. 在Vue组件中集成TinyMCEimport Editor from tinymce/tinymce-vue; import ./plugins/wordpaste/plugin; import ./plugins/docimport/plugin; export default { components: { Editor }, data() { return { content: , editorInit: { height: 500, menubar: true, plugins: [ advlist autolink lists link image charmap print preview anchor, searchreplace visualblocks code fullscreen, insertdatetime media table paste code help wordcount, wordpaste docimport // 添加我们的自定义插件 ], toolbar: undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help | \ wordpaste docimport, // 其他配置... images_upload_handler: function (blobInfo, success, failure) { // 默认图片上传处理备用 const formData new FormData(); formData.append(file, blobInfo.blob(), blobInfo.filename()); fetch(/api/upload/image, { method: POST, body: formData }) .then(response response.json()) .then(data { success(data.url); }) .catch(() failure(图片上传失败)); } } }; } };后端实现 (ASP.NET WebForm)1. 图片上传处理// Api/UploadImage.ashx%WebHandlerLanguageC#ClassUploadImage%usingSystem;usingSystem.IO;usingSystem.Web;usingAliyun.OSS;usingNewtonsoft.Json;publicclassUploadImage:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{if(context.Request.Files.Count0){context.Response.Write(JsonConvert.SerializeObject(new{successfalse,message没有上传文件}));return;}varfilecontext.Request.Files[0];varfileNameGuid.NewGuid().ToString()Path.GetExtension(file.FileName);// 上传到阿里云OSSstringendpointyour-oss-endpoint;stringaccessKeyIdyour-access-key-id;stringaccessKeySecretyour-access-key-secret;stringbucketNameyour-bucket-name;stringobjectNameuploads/images/fileName;varclientnewOssClient(endpoint,accessKeyId,accessKeySecret);using(varstreamfile.InputStream){client.PutObject(bucketName,objectName,stream);}// 生成访问URL根据实际配置可能需要签名stringfileUrl$https://{bucketName}.{endpoint}/{objectName};context.Response.Write(JsonConvert.SerializeObject(new{successtrue,urlfileUrl}));}catch(Exceptionex){context.Response.Write(JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}publicboolIsReusablefalse;}2. 文档导入处理// Api/DocumentImport.ashx%WebHandlerLanguageC#ClassDocumentImport%usingSystem;usingSystem.IO;usingSystem.Web;usingAliyun.OSS;usingNewtonsoft.Json;usingDocumentFormat.OpenXml.Packaging;usingDocumentFormat.OpenXml.Wordprocessing;usingiTextSharp.text.pdf;usingiTextSharp.text.pdf.parser;usingSystem.Text;publicclassDocumentImport:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{if(context.Request.Files.Count0){context.Response.Write(JsonConvert.SerializeObject(new{successfalse,message没有上传文件}));return;}varfilecontext.Request.Files[0];varfileExtPath.GetExtension(file.FileName).ToLower();stringhtmlContent;switch(fileExt){case.doc:case.docx:htmlContentProcessWordDocument(file.InputStream);break;case.xls:case.xlsx:htmlContentProcessExcelDocument(file.InputStream);break;case.ppt:case.pptx:htmlContentProcessPowerPointDocument(file.InputStream);break;case.pdf:htmlContentProcessPdfDocument(file.InputStream);break;default:context.Response.Write(JsonConvert.SerializeObject(new{successfalse,message不支持的文件格式}));return;}// 处理文档中的图片htmlContentProcessImagesInHtml(htmlContent,file.FileName);context.Response.Write(JsonConvert.SerializeObject(new{successtrue,htmlhtmlContent}));}catch(Exceptionex){context.Response.Write(JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}privatestringProcessWordDocument(StreamfileStream){// 使用OpenXML处理Word文档using(WordprocessingDocumentdocWordprocessingDocument.Open(fileStream,false)){varbodydoc.MainDocumentPart.Document.Body;varhtmlBuildernewStringBuilder();// 这里需要实现将Word内容转换为HTML的逻辑// 实际项目中可能需要使用更复杂的转换库// 简单示例处理段落foreach(varparagraphinbody.Descendants()){htmlBuilder.Append();foreach(varruninparagraph.Descendants()){foreach(vartextinrun.Descendants()){htmlBuilder.Append(HttpUtility.HtmlEncode(text.Text));}}htmlBuilder.Append();}// 处理图片实际图片数据需要从文档中提取// 这里只是示例实际需要更复杂的处理returnhtmlBuilder.ToString();}}privatestringProcessExcelDocument(StreamfileStream){// 类似地处理Excel文档// 实际项目中可能需要使用EPPlus等库returnExcel文档内容将在这里转换为HTML;}privatestringProcessPowerPointDocument(StreamfileStream){// 处理PowerPoint文档returnPowerPoint文档内容将在这里转换为HTML;}privatestringProcessPdfDocument(StreamfileStream){// 使用iTextSharp处理PDF文档varhtmlBuildernewStringBuilder();using(varreadernewPdfReader(fileStream)){for(inti1;ireader.NumberOfPages;i){varstrategynewSimpleTextExtractionStrategy();stringcurrentTextPdfTextExtractor.GetTextFromPage(reader,i,strategy);htmlBuilder.Append(${HttpUtility.HtmlEncode(currentText)});}}returnhtmlBuilder.ToString();}privatestringProcessImagesInHtml(stringhtml,stringoriginalFileName){// 这里需要实现将HTML中的图片数据提取并上传到OSS// 然后替换HTML中的图片引用为OSS URL// 实际项目中可能需要使用HtmlAgilityPack等库来解析HTML// 简单示例实际实现会更复杂returnhtml.Replace(src\data:image,src\https://your-bucket.oss-cn-hangzhou.aliyuncs.com/temp-image.png);}publicboolIsReusablefalse;}完整解决方案说明功能特点Word粘贴功能通过自定义TinyMCE插件实现支持从Word直接粘贴内容自动识别并上传图片到阿里云OSS保留基本格式字体、颜色、表格等文档导入功能支持多种格式Word、Excel、PPT、PDF保留文档中的图片和基本样式自动处理图片上传技术优势前端使用Vue2集成TinyMCE后端使用ASP.NET WebForm处理上传图片存储在阿里云OSS便于扩展不影响现有系统功能部署说明前端部署将自定义插件文件放入Vue项目的src/plugins目录在TinyMCE初始化配置中添加插件构建并部署前端应用后端部署将两个ASHX处理程序添加到ASP.NET项目配置阿里云OSS访问密钥确保服务器可以访问互联网用于上传到OSS配置项TinyMCE API密钥阿里云OSS配置endpoint、accessKey、bucketName等上传文件大小限制可在web.config中配置预算控制本方案完全在2万预算内实现主要开发成本前后端集成和测试约1.5万阿里云OSS费用按使用量计费初始几乎免费其他云服务预留未来扩展使用技术支持与交流我们提供全程技术支持包括集成指导问题排查性能优化建议未来升级支持同时欢迎加入我们的QQ群223813913参与技术交流新人加群送1~99元红包推荐客户可得20%提成分享开源项目和技术心得这个方案已经在实际项目中验证过能够稳定运行。如果需要更复杂的功能如完整的Word样式保留、公式转换等可以考虑使用专业的文档转换中间件但这会增加一些成本。希望这个方案对大家有所帮助如果有任何问题或需要进一步的定制开发欢迎在群里交流或直接联系我。复制插件安装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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例