管理著一批芯片制造產(chǎn)業(yè)鏈的垂直資訊站最讓我頭疼的從來(lái)不是服務(wù)器負(fù)載反而是編輯們每天都會(huì)罵人的那個(gè)操作——從Word里復(fù)制一篇產(chǎn)品規(guī)格說(shuō)明粘貼到umeditor里點(diǎn)保存然后前臺(tái)樣式就亂了。段落間距忽大忽小字號(hào)時(shí)而12px時(shí)而16px表格第一列像被人拽了一把空行多到能跑馬圖片下面的注釋字體還帶著Word特有的那種藍(lán)色。這兩年我陸續(xù)把站群后臺(tái)的富文本編輯器統(tǒng)一收斂到umeditor就是為了解決這個(gè)Word導(dǎo)入兼容性問(wèn)題前前后后踩了不少坑也沉淀了一套相對(duì)完整的處理方案。這篇就把整個(gè)處理過(guò)程拆開(kāi)講透——包括為什么會(huì)亂、前端攔截清洗怎么做、后端為什么還得兜一層底。如果你也在運(yùn)營(yíng)類(lèi)似的行業(yè)網(wǎng)站群編輯團(tuán)隊(duì)里有人天天拿Word粘貼文檔或者你自己被編輯器里那些甩不掉的Office垃圾標(biāo)簽折磨過(guò)這篇文章應(yīng)該能讓你少走好幾天的彎路。我會(huì)把代碼、配置、踩坑點(diǎn)都直接放出來(lái)你可以照著抄。1. 編輯部的日常從Word到umeditor的一場(chǎng)格式災(zāi)難先說(shuō)說(shuō)我們這邊的實(shí)際場(chǎng)景。站群覆蓋了半導(dǎo)體材料、設(shè)備、封裝測(cè)試、晶圓制造工藝幾個(gè)細(xì)分方向每個(gè)站點(diǎn)都有獨(dú)立的欄目和模板但后臺(tái)都是同一套內(nèi)容管理系統(tǒng)編輯器統(tǒng)一用的umeditor。內(nèi)容團(tuán)隊(duì)每天要發(fā)的東西特別雜展會(huì)新聞稿、廠商提供的產(chǎn)品參數(shù)表、技術(shù)白皮書(shū)的摘錄、專(zhuān)家講座的紀(jì)要這些素材十有八九都是Word文檔的形式躺在編輯的電腦里。編輯的工作流很固定打開(kāi)WordCtrlA全選CtrlC復(fù)制回到瀏覽器后臺(tái)CtrlV粘貼到umeditor的編輯區(qū)然后點(diǎn)發(fā)布。問(wèn)題就出在這個(gè)CtrlV上。粘貼進(jìn)去的瞬間編輯區(qū)看著好像是正常的——段落有縮進(jìn)標(biāo)題有加粗表格線條都在。真正崩潰的是在預(yù)覽和發(fā)布之后。我匯總過(guò)編輯反饋的最常見(jiàn)變形類(lèi)型段落行距變得忽寬忽窄。同一篇文章里有的段落行距是正常值有的段落卻像開(kāi)了倍速一樣松垮因?yàn)閃ord給每個(gè)段落都寫(xiě)死了line-height。字號(hào)混戰(zhàn)。正文里的中文字變成12px英文和數(shù)字卻變成10.5pt甚至同一句話里出現(xiàn)兩種字號(hào)。表格完全失控。列寬被Word的絕對(duì)寬度鎖死粘貼到窄欄目的頁(yè)面上直接撐破版面某些單元格的背景色消失邊框線粗細(xì)不一。莫名其妙的空行。Word的o:p標(biāo)簽在編輯器里渲染成空段落一篇文章貼下來(lái)多出十幾二十個(gè)空白行。字體顏色被鎖定。原文里沒(méi)有特別標(biāo)色的文字到了前臺(tái)卻變成深灰色或者藍(lán)色。最麻煩的是這些問(wèn)題在umeditor的源代碼模式里看不太出來(lái)——HTML代碼里全是stylemso-line-height-rule:exactly; line-height:...;這種Office專(zhuān)有樣式混在一堆正常標(biāo)簽里普通人肉眼根本找不出問(wèn)題。但瀏覽器一解析這些樣式就實(shí)打?qū)嵉貕褐屏苏军c(diǎn)模板里的CSS。這個(gè)階段我試過(guò)兩種表面功夫一是讓編輯粘貼到umeditor后用自帶的清除格式按鈕二是切到純文本模式重新排版。事實(shí)證明都不治本。幾百篇文章的月度產(chǎn)能編輯不可能每篇都手動(dòng)刷一遍格式純文本模式等于把Word里的加粗、列表、表格全廢了排版成本直接翻倍。所以必須從源頭攔截。2. 剪貼板里的偽HTML問(wèn)題為什么出在源頭要解決問(wèn)題得先搞清楚一個(gè)反直覺(jué)的事實(shí)——從Word里復(fù)制出來(lái)的東西根本就不是干凈的文本而是一段被Word重新序列化過(guò)的專(zhuān)用HTML片段。Windows系統(tǒng)在復(fù)制操作發(fā)生時(shí)會(huì)把內(nèi)容按多種格式同時(shí)放進(jìn)剪貼板其中既包括純文本text/plain也包括HTML片段text/html。Word存放在text/html里的內(nèi)容和我們平時(shí)手寫(xiě)的HTML完全是兩種風(fēng)格。我截取過(guò)一段從Word復(fù)制出來(lái)的剪貼板HTML簡(jiǎn)化之后長(zhǎng)這樣!--[if gte mso 9]xml w:WordDocument w:ViewNormal/w:View w:Zoom0/w:Zoom w:TrackMovesfalse/w:TrackMoves /w:WordDocument /xml![endif]-- p classMsoNormal stylemso-pagination:widow-orphan; line-height:150%; span stylefont-size:10.5pt; font-family:Arial,sans-serif; mso-ascii-font-family:Arial; 芯片制造的核心環(huán)節(jié)包括 /span span langEN-US stylefont-size:10.5pt; font-family:Arial,sans-serif; CMP /span o:p/o:p /p這里面有幾類(lèi)東西是編輯器根本不需要的!--[if gte mso 9]...![endif]--Word的條件注釋專(zhuān)門(mén)給Office程序讀的元信息。w:WordDocument、w:View這一整組w:前綴標(biāo)簽是Word的XML命名空間瀏覽器不認(rèn)但會(huì)殘留在DOM里。o:pWord的空段落占位符在頁(yè)面上渲染成空白行。mso-前綴的CSS聲明例如mso-pagination、mso-ascii-font-family它們只在Word自己的排版引擎里有意義到了瀏覽器里要么被忽略、要么產(chǎn)生奇怪的副作用。classMsoNormalWord內(nèi)置樣式類(lèi)名會(huì)在后臺(tái)CSS表里被重新定義。每個(gè)字符被包在獨(dú)立的span里一個(gè)句子拆成三四層嵌套span。如果用瀏覽器開(kāi)發(fā)者工具去看umeditor粘貼后的DOM你會(huì)發(fā)現(xiàn)這些標(biāo)簽全被原樣塞進(jìn)了正文區(qū)。為什么因?yàn)閡meditor走的是所見(jiàn)即所得的老路子你粘貼什么它就是盡量還原什么。它內(nèi)部對(duì)粘貼內(nèi)容只是做了一遍簡(jiǎn)單的HTML標(biāo)簽白名單過(guò)濾把script、iframe這類(lèi)危險(xiǎn)標(biāo)簽剔掉但不會(huì)去解析、重建DOM結(jié)構(gòu)更不會(huì)主動(dòng)清理Office特有的樣式和注釋。所以Word給什么它就原樣插進(jìn)去。這也就能解釋為什么格式會(huì)亂——站點(diǎn)的前臺(tái)模板統(tǒng)一用了p { line-height: 1.6 }這樣的規(guī)則但Word粘貼進(jìn)來(lái)的段落自帶line-height:150%的內(nèi)聯(lián)樣式按CSS的優(yōu)先級(jí)規(guī)則內(nèi)聯(lián)樣式直接把模板規(guī)則干掉了。大部分情況下前臺(tái)展示用的樣式表和你正文里殘留的Office內(nèi)聯(lián)樣式根本不在同一個(gè)設(shè)計(jì)體系里互相打架就是必然的。所以我得出的第一個(gè)結(jié)論是靠編輯器自帶的清除格式按鈕只能解決一小部分問(wèn)題必須從兩個(gè)環(huán)節(jié)下手——前端在粘貼事件發(fā)生時(shí)主動(dòng)攔截并清洗剪貼板里的HTML后端在保存入庫(kù)前做第二層凈化。這兩個(gè)環(huán)節(jié)缺一不可。3. 前端攔截清洗把Office垃圾標(biāo)簽攔在發(fā)布之前前端攔截的思路不復(fù)雜監(jiān)聽(tīng)編輯器的paste事件獲取剪貼板里的text/html數(shù)據(jù)交給一個(gè)專(zhuān)門(mén)的清洗函數(shù)處理處理完再手動(dòng)塞回編輯器。關(guān)鍵是清洗規(guī)則要做到既不漏掉Office垃圾又不過(guò)度殺傷原文格式。3.1 攔截粘貼事件與數(shù)據(jù)獲取umeditor實(shí)例化之后可以直接拿它的DOM容器綁定paste監(jiān)聽(tīng)。多數(shù)現(xiàn)代瀏覽器都支持ClipboardEvent.clipboardData我們可以靠它取到兩種格式的數(shù)據(jù)editor.addListener(ready, function () { var container editor.container; container.addEventListener(paste, function (e) { var clipboardData e.clipboardData || window.clipboardData; var html ; var text ; if (clipboardData) { html clipboardData.getData(text/html); text clipboardData.getData(text/plain); } // 沒(méi)有HTML內(nèi)容說(shuō)明是純文本粘貼直接放行 if (!html) { return; } e.preventDefault(); // 有些瀏覽器在preventDefault之后剪貼板數(shù)據(jù)會(huì)失效 // 所以把后續(xù)處理包進(jìn)setTimeout里等數(shù)據(jù)穩(wěn)定再取 setTimeout(function () { var cleanHtml cleanWordHtml(html); editor.setContent(cleanHtml, true); }, 10); }); });這里有個(gè)容易被忽略的坑如果你在e.preventDefault()之后立刻去讀clipboardData個(gè)別瀏覽器尤其是老版Edge和部分舊Chrome內(nèi)核會(huì)返回空字符串因?yàn)槟J(rèn)行為被中斷后剪貼板的訪問(wèn)權(quán)限也跟著變了。穩(wěn)妥的做法是先把html讀出來(lái)再阻止默認(rèn)行為或者像上面代碼里那樣把清洗邏輯放進(jìn)setTimeout里延后執(zhí)行。3.2 清洗函數(shù)的具體實(shí)現(xiàn)清洗函數(shù)cleanWordHtml的核心目標(biāo)很明確刪除Office專(zhuān)屬標(biāo)記保留語(yǔ)義化標(biāo)簽剝離危險(xiǎn)屬性。我把完整實(shí)現(xiàn)放出來(lái)你可以直接復(fù)制到站群的公共JS里function cleanWordHtml(html) { if (!html) return ; // 1. 移除office XML聲明、條件注釋、所有無(wú)用標(biāo)簽 html html.replace(/!--[\s\S]*?--/g, ) // 去注釋 .replace(/xml[\s\S]*?\/xml/gi, ) // 去xml塊 .replace(/\/?o:p[^]*/gi, ) // 去o:p .replace(/\/?v:[^]*/gi, ) // 去v:開(kāi)頭的VML .replace(/\/?w:[^]*/gi, ) // 去w:開(kāi)頭的Word標(biāo)記 .replace(/\/?st1:[^]*/gi, ) // 去st1:開(kāi)頭的SmartTag .replace(/!\[if[\s\S]*?\]/g, ); // 去條件注釋 // 2. 創(chuàng)建DOM解析器在內(nèi)存里操作避免正則匹配不到嵌套結(jié)構(gòu) var doc new DOMParser().parseFromString(html, text/html); var root doc.body; // 3. 處理style屬性移除mso開(kāi)頭和css語(yǔ)言標(biāo)記 var all root.querySelectorAll(*); for (var i 0; i all.length; i) { var el all[i]; var style el.getAttribute(style); if (style) { var clean style.split(;) .map(function (s) { return s.trim(); }) .filter(function (s) { if (s ) return false; // 過(guò)濾掉所有mso-屬性、lang屬性、font-family中的mso字體 if (/^mso-/.test(s)) return false; if (/^css-language/.test(s)) return false; return true; }) .join(;); if (clean) { el.setAttribute(style, clean); } else { el.removeAttribute(style); } } // 4. 去掉word留下的語(yǔ)言標(biāo)記 if (el.getAttribute(lang) !el.textContent.trim()) { el.removeAttribute(lang); } // 5. 清理空的span和p if (el.tagName SPAN !el.getAttribute(style) !el.getAttribute(class) el.children.length 0 el.textContent.trim() ) { el.parentNode.removeChild(el); } if (el.tagName P el.children.length 0 el.textContent.trim() ) { el.parentNode.removeChild(el); } } // 6. 移除class里的MsoNormal等Word內(nèi)置類(lèi)名 var allWithClass root.querySelectorAll([class]); for (var j 0; j allWithClass.length; j) { var cls allWithClass[j]; var classNames cls.getAttribute(class).split(/\s/) .filter(function (name) { return name !/^Mso/.test(name); }); if (classNames.length) { cls.setAttribute(class, classNames.join( )); } else { cls.removeAttribute(class); } } // 7. 遞歸清理嵌套的font標(biāo)簽去掉face/color殘留 root.querySelectorAll(font).forEach(function (f) { var parent f.parentNode; while (f.firstChild) { parent.insertBefore(f.firstChild, f); } parent.removeChild(f); }); // 8. 序列化回字符串 return root.innerHTML; }這套清洗做完Word里面的MsoNormal、mso-line-height-rule、o:p、langEN-US這類(lèi)東西基本絕跡了而加粗、斜體、列表、表格、圖片這些語(yǔ)義化標(biāo)簽都能保住。我強(qiáng)烈建議用DOMParser做解析而不是純正則——Word生成的HTML嵌套很深純正則在復(fù)雜嵌套下很容易誤傷DOM解析更可靠。3.3 保留格式的取舍策略清洗做太過(guò)也有問(wèn)題這是我在站群實(shí)際運(yùn)營(yíng)中逐步調(diào)整出來(lái)的平衡。一開(kāi)始我圖省事直接取text/plain粘貼結(jié)果編輯炸了——從Word復(fù)制的表格全沒(méi)了變成一行行tab分隔的純文本。后來(lái)改成全清洗、只留語(yǔ)義標(biāo)簽的方案才算真正可落地。我這里說(shuō)的保留范圍是這樣的p、h1~h6、ul、ol、li、dl、dt、dd這些結(jié)構(gòu)標(biāo)簽原樣保留。strong、em、b、i、u、s這些基礎(chǔ)行內(nèi)格式保留。table、tr、td、th、thead、tbody表格結(jié)構(gòu)保留但剝掉大部分內(nèi)聯(lián)樣式讓前臺(tái)模板的表格樣式接管。img保留但要額外處理后面踩坑章節(jié)會(huì)說(shuō)。a標(biāo)簽保留href和title但去掉target——站群內(nèi)的文章鏈接統(tǒng)一要求新窗口打開(kāi)規(guī)則由模板決定。再?gòu)?qiáng)調(diào)一點(diǎn)清洗不是越干凈越好。如果站點(diǎn)模板依賴于某種特定的段落格式約定比如技術(shù)參數(shù)表固定兩列過(guò)度刪除樣式會(huì)導(dǎo)致前臺(tái)表格沒(méi)邊框沒(méi)間距。建議清洗函數(shù)做成參數(shù)可配置的像上面代碼里的filter函數(shù)將來(lái)可以根據(jù)站點(diǎn)模板動(dòng)態(tài)調(diào)整。4. 后端HTML凈化為站群內(nèi)容做雙保險(xiǎn)前端攔截解決了90%的日常粘貼問(wèn)題但兩條漏網(wǎng)路徑依然存在一是某些低版本瀏覽器或者內(nèi)核特殊的國(guó)產(chǎn)瀏覽器剪貼板事件拿不到text/html前端清洗根本不會(huì)觸發(fā)二是編輯可能會(huì)從郵件客戶端、網(wǎng)頁(yè)、PDF里復(fù)制內(nèi)容這些來(lái)源同樣可能帶來(lái)非語(yǔ)義化的HTML甚至夾帶XSS攻擊代碼。所以我在站群的每個(gè)站點(diǎn)根目錄下都部署了一層后端HTML凈化邏輯統(tǒng)一放在公共函數(shù)庫(kù)里。4.1 為什么不能用簡(jiǎn)單strip_tags很多人覺(jué)得后端凈化就是strip_tags一下危險(xiǎn)標(biāo)簽全沒(méi)了順便把垃圾也清了。這個(gè)思路有個(gè)致命問(wèn)題strip_tags只按標(biāo)簽名刪不管屬性里的危險(xiǎn)內(nèi)容。Word粘貼產(chǎn)生的樣式里面雖然不含腳本但如果哪個(gè)編輯手滑復(fù)制了一段帶onerror的imgstrip_tags是攔不住的。加上站群內(nèi)容會(huì)被搜索引擎大量收錄萬(wàn)一中招的都是公開(kāi)頁(yè)面影響面會(huì)很快擴(kuò)散。所以后端凈化我用的方案是PHP環(huán)境下的HTMLPurifier它對(duì)屬性、協(xié)議、CSS聲明都做白名單校驗(yàn)比單純strip_tags可靠得多。4.2 HTMLPurifier的關(guān)鍵配置我們的后臺(tái)是PHP所以在composer里引入了HTMLPurifier封裝成統(tǒng)一函數(shù)purify_html($dirty_html)?php require_once __DIR__ . /vendor/autoload.php; use HTMLPurifier; use HTMLPurifier_Config; function purify_html($dirtyHtml) { $config HTMLPurifier_Config::createDefault(); // 允許的標(biāo)簽 $config-set(HTML.Allowed, p,br,strong,em,u,s,ul,ol,li,blockquote,. h2,h3,h4,h5,h6,. table[class],thead,tbody,tr,td[colspan|rowspan],th[colspan|rowspan],. img[src|alt|width|height],a[href|title], . code,pre ); // 允許的屬性 $config-set(HTML.AllowedAttributes, *.class,img.src,img.alt,img.width,img.height,a.href,a.title); // 托管協(xié)議配置防止javascript:偽協(xié)議 $config-set(URI.AllowedSchemes, [http true, https true, mailto true]); // 關(guān)閉embed/object堅(jiān)決不允許Flash時(shí)代的老玩法 $config-set(HTML.SafeObject, false); $config-set(HTML.SafeEmbed, false); // CSS白名單只留字體基礎(chǔ)屬性和表格布局相關(guān) $config-set(CSS.AllowedProperties, font-weight,font-style,text-decoration,text-align,. width,height,border-collapse,vertical-align,background-color); // 如果正文里帶過(guò)大的內(nèi)聯(lián)樣式就不需要了直接關(guān)掉style $config-set(CSS.AllowTricky, false); $purifier new HTMLPurifier($config); $cleanHtml $purifier-purify($dirtyHtml); // 清理過(guò)長(zhǎng)的空段落Word粘貼經(jīng)常產(chǎn)生連續(xù)多個(gè)pbr/p $cleanHtml preg_replace(#(pbr/?\s*/p){2,}#i, pbr/p, $cleanHtml); return $cleanHtml; }這層凈化解決的核心問(wèn)題不是格式——格式是前端的事——而是安全兜底和HTML合規(guī)性。HTMLPurifier會(huì)把所有不被允許的標(biāo)簽、屬性、CSS聲明全丟掉輸出一個(gè)干凈、語(yǔ)義化、沒(méi)有XSS風(fēng)險(xiǎn)的HTML片段。站群的后臺(tái)保存接口統(tǒng)一調(diào)用這個(gè)函數(shù)保證入庫(kù)的每篇文章都經(jīng)過(guò)了白名單過(guò)濾。搞這塊的時(shí)候我踩了一個(gè)性能的坑某次編輯粘貼了一篇64頁(yè)的PDF轉(zhuǎn)Word文檔整段HTML文本有300多KBpurify跑了接近兩秒接口超時(shí)。后面我加了一層判斷如果strlen($dirtyHtml)超過(guò)200KB就先用mb_substr截?cái)嗟胶侠黹L(zhǎng)度再處理——其實(shí)這種超長(zhǎng)文本來(lái)就應(yīng)該拆成多段處理不該一次性塞進(jìn)編輯器。4.3 圖片的特殊處理服務(wù)器端的凈化還會(huì)順手處理一類(lèi)問(wèn)題Word粘貼的圖片經(jīng)常是base64編碼的內(nèi)嵌圖片HTML里長(zhǎng)這樣img srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...這種圖片直接保存會(huì)把數(shù)據(jù)庫(kù)撐爆而且圖片無(wú)法被搜索引擎抓取訪問(wèn)量大的頁(yè)面還會(huì)拖慢加載速度。我建議在保存接口里做一個(gè)檢測(cè)凡是以data:image開(kāi)頭的src統(tǒng)一轉(zhuǎn)存到站群的CDN路徑生成一個(gè)新文件名再把src替換成真實(shí)URL。站群后臺(tái)如果用的對(duì)象存儲(chǔ)這一步也很好封裝。我后面再細(xì)說(shuō)這個(gè)先不急。5. 實(shí)測(cè)中的典型坑位與針對(duì)性修復(fù)方案上線后我觀察了編輯部?jī)芍芏嗟膶?shí)際使用情況大部分問(wèn)題確實(shí)消失了但又有幾個(gè)新坑冒出來(lái)。這些坑特別有代表性單獨(dú)列出來(lái)說(shuō)一下。5.1 表格粘貼后沒(méi)有邊框了前端清洗把Word表格內(nèi)聯(lián)樣式里的border、cellspacing等屬性全清掉了但站群前臺(tái)模板對(duì)表格的默認(rèn)樣式比較弱導(dǎo)致從Word粘貼過(guò)來(lái)的表格在前臺(tái)變成了隱形表格——有行列結(jié)構(gòu)就是看不到線。解決辦法不是在清洗里保留Word的邊框樣式而是在前臺(tái)模板的CSS里補(bǔ)上對(duì)table的默認(rèn)樣式.article-content table { width: 100%; border-collapse: collapse; margin: 16px 0; } .article-content th, .article-content td { border: 1px solid #ddd; padding: 8px 10px; }這樣不管是Word粘貼的表格還是編輯器手敲的表格都能獲得一套統(tǒng)一的視覺(jué)樣式。這比從Word里繼承一堆border-color:#7f9db9之類(lèi)的破碎樣式可靠得多。5.2 表格列寬撐破版面Word表格經(jīng)常給td寫(xiě)入width: 112px這種絕對(duì)像素值在站群窄欄里一旦列數(shù)多就必然溢出。我在項(xiàng)目里引入了一個(gè)簡(jiǎn)單的后處理用正則把所有width\d(\.\d)?和width: ?\d(\.\d)?px屬性刪掉然后給表格統(tǒng)一加上table-layout: auto讓瀏覽器根據(jù)內(nèi)容自動(dòng)分配列寬。// 前端清洗完成后對(duì)表格做一次性處理 function normalizeTables(rootNode) { var tables rootNode.querySelectorAll(table); for (var i 0; i tables.length; i) { tables[i].removeAttribute(width); tables[i].style.width 100%; tables[i].style.tableLayout auto; var cells tables[i].querySelectorAll(td, th); for (var j 0; j cells.length; j) { cells[j].removeAttribute(width); cells[j].removeAttribute(height); } } }這個(gè)處理建議放在清洗函數(shù)里最后一步執(zhí)行保證入庫(kù)內(nèi)容本身就是自適應(yīng)列寬的形態(tài)。5.3 圖片base64導(dǎo)致的存儲(chǔ)壓力這是最隱蔽的坑。編輯從Word里拖一張高清設(shè)備照片進(jìn)去umeditor界面上看到的是正常的圖片但源代碼模式里是一長(zhǎng)串base64字符串。三個(gè)月的站群運(yùn)營(yíng)下來(lái)數(shù)據(jù)庫(kù)體積漲了1.7倍排查半天才發(fā)現(xiàn)是粘貼圖片導(dǎo)致的。我先在umeditor配置里開(kāi)了catchRemoteImageEnable: true抓取遠(yuǎn)程圖片讓編輯器自動(dòng)把外鏈圖片拉取到服務(wù)器。但這只解決遠(yuǎn)程圖片base64內(nèi)嵌圖還是靠后端保存時(shí)處理。我在公共函數(shù)里加了一段轉(zhuǎn)存邏輯function convertBase64Images($html) { preg_match_all(/img[^]srcdata:image\/(png|jpeg|jpg|gif);base64,([^])/i, $html, $matches); foreach ($matches[0] as $index $fullMatch) { $ext $matches[1][$index]; $data base64_decode($matches[2][$index]); // 生成唯一文件名防止路徑?jīng)_突 $filename date(Ymd) . / . uniqid() . . . $ext; $url upload_to_storage($filename, $data); // 偽代碼上傳到對(duì)象存儲(chǔ)并返回URL $html str_replace($fullMatch, img src . $url . alt . $filename . , $html); } return $html; }注意一點(diǎn)base64轉(zhuǎn)存會(huì)明顯增加接口耗時(shí)因?yàn)橐獯a、傳輸、上傳。建議轉(zhuǎn)存放在異步隊(duì)列里先把替換后的URL寫(xiě)進(jìn)一個(gè)臨時(shí)字段等上傳完成再更新到文章正文里避免用戶點(diǎn)保存時(shí)轉(zhuǎn)圈太久。不過(guò)如果文章量不大同步處理也能接受。5.4 空段落堆積導(dǎo)致間距異常前端清洗里我刪除了空的span也刪了沒(méi)有內(nèi)容的p但Word還遺留一種情況段落里有且僅有br一個(gè)接一個(gè)比如pbr/ppbr/p。這種在umeditor編輯區(qū)里看起來(lái)就是幾行空白前臺(tái)渲染時(shí)會(huì)產(chǎn)生很大的垂直留白。我后來(lái)在上面的清洗代碼里直接加了一步正則合并把連續(xù)兩個(gè)及以上的空段落壓縮成一個(gè)html html.replace(/(p(?:\s[^]*)?\s*br\s*\/?\s*\/p){2,}/g, pbr/p);同時(shí)建議編輯在內(nèi)容發(fā)布之前用umeditor自帶的刪除空段落插件跑一遍——后端也可以做同樣的壓縮雙保險(xiǎn)總比單保險(xiǎn)穩(wěn)。5.5 老瀏覽器的兼容性兜底前面提到部分瀏覽器在paste事件里拿不到text/html數(shù)據(jù)。這個(gè)我實(shí)測(cè)下來(lái)主要是老版本Edge和360安全瀏覽器的兼容模式。兜底方案是給umeditor加一個(gè)粘貼后自動(dòng)清理的鉤子在afterpaste事件里對(duì)整個(gè)編輯器內(nèi)容區(qū)再執(zhí)行一次cleanWordHtml——這個(gè)鉤子觸發(fā)時(shí)內(nèi)容已經(jīng)被瀏覽器寫(xiě)進(jìn)去了所以只做后置清洗相當(dāng)于把漏網(wǎng)之魚(yú)再撈一遍。editor.addListener(afterpaste, function () { var body editor.body; var html body.innerHTML; var cleanHtml cleanWordHtml(html); if (cleanHtml ! html) { editor.setContent(cleanHtml, true); } });不過(guò)要注意afterpaste里如果直接用setContent會(huì)強(qiáng)制移動(dòng)光標(biāo)位置編輯在中途被打斷。所以我同時(shí)把光標(biāo)位置緩存下來(lái)清洗結(jié)束后再恢復(fù)。實(shí)現(xiàn)起來(lái)不算復(fù)雜這里就不展開(kāi)了。5.6 站群多站點(diǎn)配置的同步管理最后說(shuō)一個(gè)站群層面獨(dú)有的坑。我們的站群有十幾個(gè)站點(diǎn)每個(gè)站點(diǎn)后臺(tái)都各自加載umeditor的配置。如果我在某個(gè)站點(diǎn)單獨(dú)改了cleanWordHtml其他站點(diǎn)不會(huì)同步慢慢就出現(xiàn)站點(diǎn)A發(fā)布正常、站點(diǎn)B表格亂掉的奇怪現(xiàn)象。我的做法是把清洗函數(shù)、表格歸一化、空段落清理全都抽到一個(gè)獨(dú)立的公共JS文件里每個(gè)站點(diǎn)的編輯器頁(yè)面都引用同一個(gè)文件。本地上線前先在staging站點(diǎn)做一輪批量歷史文章的重清洗測(cè)試確認(rèn)沒(méi)破壞舊數(shù)據(jù)再推到生產(chǎn)站群。這套流程能確保站群所有站點(diǎn)執(zhí)行的是同一套清洗邏輯不會(huì)出現(xiàn)各改各的、互相打架的情況。6. 寫(xiě)在最后這套方案實(shí)際運(yùn)行下來(lái)的體會(huì)如果讓我總結(jié)這件事最核心的教訓(xùn)那就是Word導(dǎo)入兼容性問(wèn)題不能靠編輯器設(shè)置里點(diǎn)幾下解決它本質(zhì)上是剪貼板數(shù)據(jù)、前端清洗、后端凈化、前臺(tái)CSS四層之間的協(xié)作問(wèn)題缺一層都會(huì)出幺蛾子。上線這套方案大概兩個(gè)月后編輯部關(guān)于格式亂了的求助工單從每周十幾條降到了偶爾一兩條剩下的基本都是特殊排版需求比如復(fù)雜的合并單元格表格。內(nèi)容入庫(kù)的HTML體積也小了很多Word粘貼一篇文章的代碼量從平均30KB降到了8KB左右數(shù)據(jù)庫(kù)瘦身效果明顯。我個(gè)人建議如果你也在維護(hù)類(lèi)似的站群一定要把這套清洗邏輯沉淀成公共組件不要每改一個(gè)站點(diǎn)就復(fù)制粘貼一遍代碼。畢竟項(xiàng)目的核心價(jià)值是內(nèi)容的持續(xù)生產(chǎn)而不是反復(fù)折騰一個(gè)粘貼問(wèn)題。希望這篇分享能幫你把這塊硬骨頭啃下來(lái)讓編輯能多花點(diǎn)時(shí)間在內(nèi)容上少跟格式較勁。