網(wǎng)站管理辦法制度,wordpress更換網(wǎng)站,有沒有專門做素食的美食網(wǎng)站,環(huán)?？照{(diào)東莞網(wǎng)站建設(shè)【企業(yè)級富文本編輯器功能擴(kuò)展項目紀(jì)實——從需求分析到阿里云OSS集成】 2023年X月X日 周X 上海徐匯區(qū) 一、需求拆解與核心約束 作為前端工程師#xff0c;近期接到客戶緊急需求#xff1a;在現(xiàn)有Vue2 wangEditor4的后臺系統(tǒng)中新增三大功能#xff1a; Word粘貼增強(qiáng)…【企業(yè)級富文本編輯器功能擴(kuò)展項目紀(jì)實——從需求分析到阿里云OSS集成】2023年X月X日 周X 上?！ば靺R區(qū)一、需求拆解與核心約束作為前端工程師近期接到客戶緊急需求在現(xiàn)有Vue2 wangEditor4的后臺系統(tǒng)中新增三大功能Word粘貼增強(qiáng)保留格式表格/字體/顏色并自動上傳圖片至阿里云OSS微信公眾號抓取解析HTML并替換圖片為OSS鏈接多格式導(dǎo)入支持Word/Excel/PPT/PDF全格式導(dǎo)入保持排版一致性技術(shù)邊界條件前端Vue2-cli wangEditor4需兼容IE11及國產(chǎn)瀏覽器后端PHP 7.4 Laravel現(xiàn)有架構(gòu)不可重構(gòu)存儲阿里云OSS需預(yù)留多云接口預(yù)算≤2萬元含第三方服務(wù)采購二、技術(shù)選型與風(fēng)險評估1. 富文本編輯器插件方案對比方案優(yōu)勢風(fēng)險成本年費wangEditor擴(kuò)展原生支持Vue2API兼容性好需自行開發(fā)Office解析模塊￥0開源TinyMCE企業(yè)版官方支持Word導(dǎo)入年費￥1.8萬超出預(yù)算￥18,000wangEditor插件輕量級但需適配wangEditor樣式?jīng)_突風(fēng)險高￥3,000決策選擇wangEditor擴(kuò)展方案理由預(yù)算內(nèi)可控僅需采購阿里云OSS流量包客戶現(xiàn)有系統(tǒng)已使用wangEditor4學(xué)習(xí)成本為零2. 關(guān)鍵技術(shù)驗證清單IE11兼容性阿里云OSS簽名// PHP后端生成STS臨時憑證安全控制$credentialsnewCredentials(ak,sk);$stsClientnewStsClient($credentials);$assumeRoleResponse$stsClient-assumeRole([RoleArnacs:ram::1234567890:role/oss-upload-role,RoleSessionNamesession-name,DurationSeconds900]);三、核心功能開發(fā)實現(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)})})// 微信公眾號內(nèi)容處理editor.cmd.do(wechatpaste,async(){consturlprompt(請輸入公眾號文章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)失效問題if(window.clipboardData!window.clipboardData.getData(HTML)){Object.defineProperty(window.clipboardData,getData,{value:(type){if(typeHTML)returndocument.selection.createRange().htmlTextreturn}})}2. 后端實現(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();}微信公眾號代理服務(wù)// api/proxy/wechat.php$url$_GET[url];$htmlfile_get_contents($url);// 替換公眾號圖片為代理URL$htmlpreg_replace_callback(/]src([^])[^]*/i,function($matches){$imgUrl$matches[1];if(strpos($imgUrl,mmbiz.qpic.cn)!false){// 生成帶簽名的臨時訪問URLreturn;}return$matches[0];},$html);echo$html;3. 多格式導(dǎo)入實現(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費用優(yōu)化使用低頻訪問類型存儲歷史文件成本降低40%啟用CDN加速減少回源流量第三方服務(wù)替代放棄商業(yè)版Office解析庫采用Word/ExcelSheetJS Community EditionPPTpptxjsPDFpdf.js pdf-lib最終成本構(gòu)成項目費用阿里云OSS流量包￥1,200域名SSL證書￥0開發(fā)人力成本￥15,000總計￥16,200五、交付與驗收標(biāo)準(zhǔn)功能驗收在IE11中成功導(dǎo)入含20張圖片的Word文檔微信公眾號圖片抓取準(zhǔn)確率≥95%性能指標(biāo)50MB PPT導(dǎo)入耗時≤8秒OSS上傳并發(fā)支持20QPS交付物完整Vue組件源碼含IE兼容補丁PHP后端接口文檔《阿里云OSS安全配置指南》項目總結(jié)關(guān)鍵突破通過DOMParser正則表達(dá)式實現(xiàn)輕量級Word樣式解析遺留問題復(fù)雜表格樣式在IE11下存在1px偏移已記錄在JIRA知識沉淀形成《前端信創(chuàng)環(huán)境兼容性手冊》納入公司知識庫附項目Git倉庫地址已同步至公司Confluence權(quán)限申請路徑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// 使用前請在服務(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})// 注冊菜單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;}測試前請配置圖片上傳接口并測試成功接口測試接口返回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)容自動上傳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ò)圖片一鍵自動上傳網(wǎng)絡(luò)圖片自動下載遠(yuǎn)程服務(wù)器圖片自動上傳遠(yuǎn)程服務(wù)器圖片下載示例點擊下載完整示例