做企業(yè)網(wǎng)站為什么要服務(wù)器呢,網(wǎng)頁(yè)設(shè)計(jì)與制作教程歐靜美,廣州app定制開發(fā)公司,最低價(jià)網(wǎng)站建設(shè)【企業(yè)級(jí)富文本編輯器功能擴(kuò)展項(xiàng)目紀(jì)實(shí)——從需求分析到阿里云OSS集成】 2023年X月X日 周X 上海徐匯區(qū) 一、需求拆解與核心約束 作為前端工程師#xff0c;近期接到客戶緊急需求#xff1a;在現(xiàn)有Vue2 wangEditor4的后臺(tái)系統(tǒng)中新增三大功能#xff1a; Word粘貼增強(qiáng)…【企業(yè)級(jí)富文本編輯器功能擴(kuò)展項(xiàng)目紀(jì)實(shí)——從需求分析到阿里云OSS集成】2023年X月X日 周X 上海·徐匯區(qū)一、需求拆解與核心約束作為前端工程師近期接到客戶緊急需求在現(xiàn)有Vue2 wangEditor4的后臺(tái)系統(tǒng)中新增三大功能Word粘貼增強(qiáng)保留格式表格/字體/顏色并自動(dòng)上傳圖片至阿里云OSS微信公眾號(hào)抓取解析HTML并替換圖片為OSS鏈接多格式導(dǎo)入支持Word/Excel/PPT/PDF全格式導(dǎo)入保持排版一致性技術(shù)邊界條件前端Vue2-cli wangEditor4需兼容IE11及國(guó)產(chǎn)瀏覽器后端PHP 7.4 Laravel現(xiàn)有架構(gòu)不可重構(gòu)存儲(chǔ)阿里云OSS需預(yù)留多云接口預(yù)算≤2萬(wàn)元含第三方服務(wù)采購(gòu)二、技術(shù)選型與風(fēng)險(xiǎn)評(píng)估1. 富文本編輯器插件方案對(duì)比方案優(yōu)勢(shì)風(fēng)險(xiǎn)成本年費(fèi)wangEditor擴(kuò)展原生支持Vue2API兼容性好需自行開發(fā)Office解析模塊￥0開源TinyMCE企業(yè)版官方支持Word導(dǎo)入年費(fèi)￥1.8萬(wàn)超出預(yù)算￥18,000wangEditor插件輕量級(jí)但需適配wangEditor樣式?jīng)_突風(fēng)險(xiǎn)高￥3,000決策選擇wangEditor擴(kuò)展方案理由預(yù)算內(nèi)可控僅需采購(gòu)阿里云OSS流量包客戶現(xiàn)有系統(tǒng)已使用wangEditor4學(xué)習(xí)成本為零2. 關(guān)鍵技術(shù)驗(yàn)證清單IE11兼容性阿里云OSS簽名// PHP后端生成STS臨時(shí)憑證安全控制$credentialsnewCredentials(ak,sk);$stsClientnewStsClient($credentials);$assumeRoleResponse$stsClient-assumeRole([RoleArnacs:ram::1234567890:role/oss-upload-role,RoleSessionNamesession-name,DurationSeconds900]);三、核心功能開發(fā)實(shí)現(xiàn)1. 前端集成Vue2 wangEditor4步驟1擴(kuò)展編輯器工具欄// src/components/RichTextEditor.vueimportwangEditorfromwangEditorexportdefault{mounted(){consteditorwangEditor.create(#editor_id,{items:[fontname,fontsize,|,wordpaste,wechatpaste,// 自定義按鈕insertfile],afterCreate:(){// 綁定自定義按鈕事件this.bindCustomButtons(editor)}})},methods:{bindCustomButtons(editor){// Word粘貼處理editor.cmd.do(wordpaste,(){consthtmlwindow.clipboardData.getData(Text)// IE兼容this.processWordContent(html).then(cleanHtml{editor.insertHtml(cleanHtml)})})// 微信公眾號(hào)內(nèi)容處理editor.cmd.do(wechatpaste,async(){consturlprompt(請(qǐng)輸入公眾號(hào)文章URL:)constresawaitfetch(/api/proxy/wechat?url${encodeURIComponent(url)})consthtmlawaitres.text()editor.insertHtml(awaitthis.processWechatContent(html))})},asyncprocessWordContent(html){// 使用DOMParser解析Word HTMLconstdocnewDOMParser().parseFromString(html,text/html)constimagesdoc.querySelectorAll(img[src^file://])// 處理本地粘貼的圖片for(letimgofimages){try{constblobawaitthis.fileToBlob(img.src)constformDatanewFormData()formData.append(file,blob,word-image.png)constresawaitfetch(/api/upload,{method:POST,body:formData})constossUrlawaitres.text()img.srcossUrl}catch(e){console.error(圖片上傳失敗:,e)img.remove()}}returndoc.body.innerHTML},fileToBlob(url){returnnewPromise((resolve){fetch(url).then(resres.blob()).then(resolve)})}}}步驟2IE11兼容性處理// 修復(fù)IE下clipboardData.getData(HTML)失效問(wèn)題if(window.clipboardData!window.clipboardData.getData(HTML)){Object.defineProperty(window.clipboardData,getData,{value:(type){if(typeHTML)returndocument.selection.createRange().htmlTextreturn}})}2. 后端實(shí)現(xiàn)PHP Aliyun OSS文件上傳接口// api/upload.phprequire_oncevendor/autoload.php;useOSSOssClient;useOSSCoreOssException;header(Content-Type: text/plain);try{$ossClientnewOssClient(accessKeyId,accessKeySecret,endpoint);$objectuploads/.uniqid()._.basename($_FILES[file][name]);$ossClient-uploadFile(bucket-name,$object,$_FILES[file][tmp_name]);echohttps://bucket-name.oss-cn-hangzhou.aliyuncs.com/.$object;}catch(OssException$e){http_response_code(500);echo上傳失敗: .$e-getMessage();}微信公眾號(hào)代理服務(wù)// api/proxy/wechat.php$url$_GET[url];$htmlfile_get_contents($url);// 替換公眾號(hào)圖片為代理URL$htmlpreg_replace_callback(/]src([^])[^]*/i,function($matches){$imgUrl$matches[1];if(strpos($imgUrl,mmbiz.qpic.cn)!false){// 生成帶簽名的臨時(shí)訪問(wèn)URLreturn;}return$matches[0];},$html);echo$html;3. 多格式導(dǎo)入實(shí)現(xiàn)Apache POI替代方案使用Mammoth.js處理Word文檔// 處理.docx文件導(dǎo)入asyncfunctionimportDocx(file){constarrayBufferawaitfile.arrayBuffer()constresultmammoth.extractRawText({arrayBuffer})// 解析結(jié)果中的圖片result.messages.forEach(msg{if(msg.typewarningmsg.message.includes(image)){// 提取圖片并上傳至OSS}})returnresult.value}PDF轉(zhuǎn)HTML方案# 使用pdf.js服務(wù)端渲染需部署Node服務(wù)# 安裝依賴npminstallpdfjs-dist# PHP調(diào)用Node服務(wù)示例$pdfHtmlshell_exec(node pdf2html.js .escapeshellarg($pdfPath));四、成本控制與優(yōu)化OSS費(fèi)用優(yōu)化使用低頻訪問(wèn)類型存儲(chǔ)歷史文件成本降低40%啟用CDN加速減少回源流量第三方服務(wù)替代放棄商業(yè)版Office解析庫(kù)采用Word/ExcelSheetJS Community EditionPPTpptxjsPDFpdf.js pdf-lib最終成本構(gòu)成項(xiàng)目費(fèi)用阿里云OSS流量包￥1,200域名SSL證書￥0開發(fā)人力成本￥15,000總計(jì)￥16,200五、交付與驗(yàn)收標(biāo)準(zhǔn)功能驗(yàn)收在IE11中成功導(dǎo)入含20張圖片的Word文檔微信公眾號(hào)圖片抓取準(zhǔn)確率≥95%性能指標(biāo)50MB PPT導(dǎo)入耗時(shí)≤8秒OSS上傳并發(fā)支持20QPS交付物完整Vue組件源碼含IE兼容補(bǔ)丁PHP后端接口文檔《阿里云OSS安全配置指南》項(xiàng)目總結(jié)關(guān)鍵突破通過(guò)DOMParser正則表達(dá)式實(shí)現(xiàn)輕量級(jí)Word樣式解析遺留問(wèn)題復(fù)雜表格樣式在IE11下存在1px偏移已記錄在JIRA知識(shí)沉淀形成《前端信創(chuàng)環(huán)境兼容性手冊(cè)》納入公司知識(shí)庫(kù)附項(xiàng)目Git倉(cāng)庫(kù)地址已同步至公司Confluence權(quán)限申請(qǐng)路徑IT部→前端組→2023-Q3-wangEditor擴(kuò)展復(fù)制插件文件安裝jquerynpm install jquery導(dǎo)入組件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化組件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:HelloWorld,data(){return{msg:Welcome to Your Vue.js App}},mounted(){vareditornewE(#editor);WordPaster.getInstance({//上傳接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//為圖片地址增加域名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:});zyCapture.getInstance({config:{PostUrl:http://localhost:8891/upload.aspx,License2:,FileFieldName:file,Fields:{uname:test},ImageUrl:http://localhost:8891{url}}})// zyoffice// 使用前請(qǐng)?jiān)诜?wù)端部署zyoffice// http://www.ncmem.com/doc/view.aspx?id82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:http://localhost:13710/zyoffice/word/convert,wordExport:http://localhost:13710/zyoffice/word/export,pdf:http://localhost:13710/zyoffice/pdf/upload})// 注冊(cè)菜單E.registerMenu(zyCaptureBtn,zyCaptureBtn)E.registerMenu(WordPasterBtn,WordPasterBtn)E.registerMenu(ImportWordToImgBtn,ImportWordToImgBtn)E.registerMenu(NetImportBtn,NetImportBtn)E.registerMenu(WordImportBtn,WordImportBtn)E.registerMenu(ExcelImportBtn,ExcelImportBtn)E.registerMenu(PPTImportBtn,PPTImportBtn)E.registerMenu(PDFImportBtn,PDFImportBtn)E.registerMenu(importWordBtn,importWordBtn)E.registerMenu(exportWordBtn,exportWordBtn)E.registerMenu(importPdfBtn,importPdfBtn)//掛載粘貼事件editor.txt.eventHooks.pasteEvents.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//掛載粘貼事件edt2.txt.eventHooks.pasteEvents.length0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}測(cè)試前請(qǐng)配置圖片上傳接口并測(cè)試成功接口測(cè)試接口返回JSON格式參考為編輯器添加按鈕components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果導(dǎo)入Word文檔,支持doc,docx導(dǎo)入Excel文檔,支持xls,xlsx粘貼Word一鍵粘貼Word內(nèi)容自動(dòng)上傳Word中的圖片保留文字樣式。Word轉(zhuǎn)圖片一鍵導(dǎo)入Word文件并將Word文件轉(zhuǎn)換成圖片上傳到服務(wù)器中。導(dǎo)入PDF一鍵導(dǎo)入PDF文件并將PDF轉(zhuǎn)換成圖片上傳到服務(wù)器中。導(dǎo)入PPT一鍵導(dǎo)入PPT文件并將PPT轉(zhuǎn)換成圖片上傳到服務(wù)器中。上傳網(wǎng)絡(luò)圖片一鍵自動(dòng)上傳網(wǎng)絡(luò)圖片自動(dòng)下載遠(yuǎn)程服務(wù)器圖片自動(dòng)上傳遠(yuǎn)程服務(wù)器圖片下載示例點(diǎn)擊下載完整示例