網(wǎng)站建設(shè)與管理期末,網(wǎng)站代理登錄網(wǎng)址,茂港網(wǎng)站設(shè)計公司,做網(wǎng)站優(yōu)惠企業(yè)網(wǎng)站后臺Word粘貼與導入功能開發(fā)方案 方案概述 大家好#xff0c;我是重慶某軟件公司的ASP.NET前端工程師#xff0c;最近接到了一個企業(yè)網(wǎng)站后臺管理系統(tǒng)的增強需求#xff0c;需要在TinyMCE編輯器中增加Word粘貼功能和多格式文檔導入功能。經(jīng)過一番研究和評估#…企業(yè)網(wǎng)站后臺Word粘貼與導入功能開發(fā)方案方案概述大家好我是重慶某軟件公司的ASP.NET前端工程師最近接到了一個企業(yè)網(wǎng)站后臺管理系統(tǒng)的增強需求需要在TinyMCE編輯器中增加Word粘貼功能和多格式文檔導入功能。經(jīng)過一番研究和評估我整理出了完整的解決方案下面分享給大家。需求分析Word粘貼功能從Word復制內(nèi)容粘貼到編輯器圖片自動上傳到阿里云OSS多格式導入功能支持Word、Excel、PPT、PDF導入保留樣式和圖片技術(shù)要求前端Vue2 CLI未來升級到Vue3編輯器TinyMCE后端ASP.NET WebForm存儲阿里云OSS未來可擴展其他云存儲預算2萬以內(nèi)技術(shù)實現(xiàn)方案前端實現(xiàn) (Vue2 TinyMCE插件)1. 創(chuàng)建TinyMCE自定義插件首先我們創(chuàng)建一個名為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(){// 創(chuàng)建自定義粘貼對話框editor.windowManager.open({title:Word內(nèi)容粘貼,body:{type:panel,items:[{type:htmlpanel,html:請直接在此處粘貼Word內(nèi)容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內(nèi)容functionprocessWordContent(editor,html){// 創(chuàng)建臨時div來解析HTMLconsttempDivdocument.createElement(div);tempDiv.innerHTMLhtml;// 處理圖片constimagestempDiv.querySelectorAll(img);letprocessedCount0;if(images.length0){// 沒有圖片直接插入內(nèi)容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);// 上傳到服務(wù)器returnfetch(/api/upload/image,{method:POST,body:formData});}).then(responseresponse.json()).then(data{// 替換圖片URLimg.srcdata.url;processedCount;// 所有圖片處理完成后插入內(nèi)容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. 創(chuàng)建文檔導入插件// src/plugins/docimport/plugin.jstinymce.PluginManager.add(docimport,function(editor){editor.ui.registry.addButton(docimport,{text:文檔導入,icon:upload,onAction:function(){// 創(chuàng)建導入對話框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:導入過程中發(fā)生錯誤: 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(圖片上傳失敗)); } } }; } };后端實現(xiàn) (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根據(jù)實際配置可能需要簽名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();// 這里需要實現(xiàn)將Word內(nèi)容轉(zhuǎn)換為HTML的邏輯// 實際項目中可能需要使用更復雜的轉(zhuǎn)換庫// 簡單示例處理段落foreach(varparagraphinbody.Descendants()){htmlBuilder.Append();foreach(varruninparagraph.Descendants()){foreach(vartextinrun.Descendants()){htmlBuilder.Append(HttpUtility.HtmlEncode(text.Text));}}htmlBuilder.Append();}// 處理圖片實際圖片數(shù)據(jù)需要從文檔中提取// 這里只是示例實際需要更復雜的處理returnhtmlBuilder.ToString();}}privatestringProcessExcelDocument(StreamfileStream){// 類似地處理Excel文檔// 實際項目中可能需要使用EPPlus等庫returnExcel文檔內(nèi)容將在這里轉(zhuǎn)換為HTML;}privatestringProcessPowerPointDocument(StreamfileStream){// 處理PowerPoint文檔returnPowerPoint文檔內(nèi)容將在這里轉(zhuǎn)換為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){// 這里需要實現(xiàn)將HTML中的圖片數(shù)據(jù)提取并上傳到OSS// 然后替換HTML中的圖片引用為OSS URL// 實際項目中可能需要使用HtmlAgilityPack等庫來解析HTML// 簡單示例實際實現(xiàn)會更復雜returnhtml.Replace(srcdata:image,srchttps://your-bucket.oss-cn-hangzhou.aliyuncs.com/temp-image.png);}publicboolIsReusablefalse;}完整解決方案說明功能特點Word粘貼功能通過自定義TinyMCE插件實現(xiàn)支持從Word直接粘貼內(nèi)容自動識別并上傳圖片到阿里云OSS保留基本格式字體、顏色、表格等文檔導入功能支持多種格式Word、Excel、PPT、PDF保留文檔中的圖片和基本樣式自動處理圖片上傳技術(shù)優(yōu)勢前端使用Vue2集成TinyMCE后端使用ASP.NET WebForm處理上傳圖片存儲在阿里云OSS便于擴展不影響現(xiàn)有系統(tǒng)功能部署說明前端部署將自定義插件文件放入Vue項目的src/plugins目錄在TinyMCE初始化配置中添加插件構(gòu)建并部署前端應用后端部署將兩個ASHX處理程序添加到ASP.NET項目配置阿里云OSS訪問密鑰確保服務(wù)器可以訪問互聯(lián)網(wǎng)用于上傳到OSS配置項TinyMCE API密鑰阿里云OSS配置endpoint、accessKey、bucketName等上傳文件大小限制可在web.config中配置預算控制本方案完全在2萬預算內(nèi)實現(xiàn)主要開發(fā)成本前后端集成和測試約1.5萬阿里云OSS費用按使用量計費初始幾乎免費其他云服務(wù)預留未來擴展使用技術(shù)支持與交流我們提供全程技術(shù)支持包括集成指導問題排查性能優(yōu)化建議未來升級支持同時歡迎加入我們的QQ群223813913參與技術(shù)交流新人加群送1~99元紅包推薦客戶可得20%提成分享開源項目和技術(shù)心得這個方案已經(jīng)在實際項目中驗證過能夠穩(wěn)定運行。如果需要更復雜的功能如完整的Word樣式保留、公式轉(zhuǎn)換等可以考慮使用專業(yè)的文檔轉(zhuǎn)換中間件但這會增加一些成本。希望這個方案對大家有所幫助如果有任何問題或需要進一步的定制開發(fā)歡迎在群里交流或直接聯(lián)系我。復制插件安裝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轉(zhuǎn)圖片工具欄按鈕(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轉(zhuǎn)圖片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word轉(zhuǎn)圖片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘貼網(wǎng)絡(luò)圖片工具欄按鈕(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:網(wǎng)絡(luò)圖片一鍵上傳,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:網(wǎng)絡(luò)圖片一鍵上傳,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},// 設(shè)置文件字段名稱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內(nèi)容自動上傳Word中的圖片保留文字樣式。Word轉(zhuǎn)圖片一鍵導入Word文件并將Word文件轉(zhuǎn)換成圖片上傳到服務(wù)器中。導入PDF一鍵導入PDF文件并將PDF轉(zhuǎn)換成圖片上傳到服務(wù)器中。導入PPT一鍵導入PPT文件并將PPT轉(zhuǎn)換成圖片上傳到服務(wù)器中。上傳網(wǎng)絡(luò)圖片一鍵自動上傳網(wǎng)絡(luò)圖片。下載示例點擊下載完整示例