管理著一批芯片制造產(chǎn)業(yè)鏈的垂直資訊站最讓我頭疼的從來不是服務(wù)器負(fù)載反而是編輯們每天都會(huì)罵人的那個(gè)操作——從Word里復(fù)制一篇產(chǎn)品規(guī)格說明粘貼到umeditor里點(diǎn)保存然后前臺(tái)樣式就亂了。段落間距忽大忽小字號(hào)時(shí)而12px時(shí)而16px表格第一列像被人拽了一把空行多到能跑馬圖片下面的注釋字體還帶著Word特有的那種藍(lán)色。這兩年我陸續(xù)把站群后臺(tái)的富文本編輯器統(tǒng)一收斂到umeditor就是為了解決這個(gè)Word導(dǎo)入兼容性問題前前后后踩了不少坑也沉淀了一套相對(duì)完整的處理方案。這篇就把整個(gè)處理過程拆開講透——包括為什么會(huì)亂、前端攔截清洗怎么做、后端為什么還得兜一層底。如果你也在運(yùn)營類似的行業(yè)網(wǎng)站群編輯團(tuán)隊(duì)里有人天天拿Word粘貼文檔或者你自己被編輯器里那些甩不掉的Office垃圾標(biāo)簽折磨過這篇文章應(yīng)該能讓你少走好幾天的彎路。我會(huì)把代碼、配置、踩坑點(diǎn)都直接放出來你可以照著抄。1. 編輯部的日常從Word到umeditor的一場格式災(zāi)難先說說我們這邊的實(shí)際場景。站群覆蓋了半導(dǎo)體材料、設(shè)備、封裝測試、晶圓制造工藝幾個(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ù)白皮書的摘錄、專家講座的紀(jì)要這些素材十有八九都是Word文檔的形式躺在編輯的電腦里。編輯的工作流很固定打開WordCtrlA全選CtrlC復(fù)制回到瀏覽器后臺(tái)CtrlV粘貼到umeditor的編輯區(qū)然后點(diǎn)發(fā)布。問題就出在這個(gè)CtrlV上。粘貼進(jìn)去的瞬間編輯區(qū)看著好像是正常的——段落有縮進(jìn)標(biāo)題有加粗表格線條都在。真正崩潰的是在預(yù)覽和發(fā)布之后。我匯總過編輯反饋的最常見變形類型段落行距變得忽寬忽窄。同一篇文章里有的段落行距是正常值有的段落卻像開了倍速一樣松垮因?yàn)閃ord給每個(gè)段落都寫死了line-height。字號(hào)混戰(zhàn)。正文里的中文字變成12px英文和數(shù)字卻變成10.5pt甚至同一句話里出現(xiàn)兩種字號(hào)。表格完全失控。列寬被Word的絕對(duì)寬度鎖死粘貼到窄欄目的頁面上直接撐破版面某些單元格的背景色消失邊框線粗細(xì)不一。莫名其妙的空行。Word的o:p標(biāo)簽在編輯器里渲染成空段落一篇文章貼下來多出十幾二十個(gè)空白行。字體顏色被鎖定。原文里沒有特別標(biāo)色的文字到了前臺(tái)卻變成深灰色或者藍(lán)色。最麻煩的是這些問題在umeditor的源代碼模式里看不太出來——HTML代碼里全是stylemso-line-height-rule:exactly; line-height:...;這種Office專有樣式混在一堆正常標(biāo)簽里普通人肉眼根本找不出問題。但瀏覽器一解析這些樣式就實(shí)打?qū)嵉貕褐屏苏军c(diǎn)模板里的CSS。這個(gè)階段我試過兩種表面功夫一是讓編輯粘貼到umeditor后用自帶的清除格式按鈕二是切到純文本模式重新排版。事實(shí)證明都不治本。幾百篇文章的月度產(chǎn)能編輯不可能每篇都手動(dòng)刷一遍格式純文本模式等于把Word里的加粗、列表、表格全廢了排版成本直接翻倍。所以必須從源頭攔截。2. 剪貼板里的偽HTML問題為什么出在源頭要解決問題得先搞清楚一個(gè)反直覺的事實(shí)——從Word里復(fù)制出來的東西根本就不是干凈的文本而是一段被Word重新序列化過的專用HTML片段。Windows系統(tǒng)在復(fù)制操作發(fā)生時(shí)會(huì)把內(nèi)容按多種格式同時(shí)放進(jìn)剪貼板其中既包括純文本text/plain也包括HTML片段text/html。Word存放在text/html里的內(nèi)容和我們平時(shí)手寫的HTML完全是兩種風(fēng)格。我截取過一段從Word復(fù)制出來的剪貼板HTML簡化之后長這樣!--[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這里面有幾類東西是編輯器根本不需要的!--[if gte mso 9]...![endif]--Word的條件注釋專門給Office程序讀的元信息。w:WordDocument、w:View這一整組w:前綴標(biāo)簽是Word的XML命名空間瀏覽器不認(rèn)但會(huì)殘留在DOM里。o:pWord的空段落占位符在頁面上渲染成空白行。mso-前綴的CSS聲明例如mso-pagination、mso-ascii-font-family它們只在Word自己的排版引擎里有意義到了瀏覽器里要么被忽略、要么產(chǎn)生奇怪的副作用。classMsoNormalWord內(nèi)置樣式類名會(huì)在后臺(tái)CSS表里被重新定義。每個(gè)字符被包在獨(dú)立的span里一個(gè)句子拆成三四層嵌套span。如果用瀏覽器開發(fā)者工具去看umeditor粘貼后的DOM你會(huì)發(fā)現(xiàn)這些標(biāo)簽全被原樣塞進(jìn)了正文區(qū)。為什么因?yàn)閡meditor走的是所見即所得的老路子你粘貼什么它就是盡量還原什么。它內(nèi)部對(duì)粘貼內(nèi)容只是做了一遍簡單的HTML標(biāo)簽白名單過濾把script、iframe這類危險(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)來的段落自帶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é)論是靠編輯器自帶的清除格式按鈕只能解決一小部分問題必須從兩個(gè)環(huán)節(jié)下手——前端在粘貼事件發(fā)生時(shí)主動(dòng)攔截并清洗剪貼板里的HTML后端在保存入庫前做第二層凈化。這兩個(gè)環(huán)節(jié)缺一不可。3. 前端攔截清洗把Office垃圾標(biāo)簽攔在發(fā)布之前前端攔截的思路不復(fù)雜監(jiān)聽編輯器的paste事件獲取剪貼板里的text/html數(shù)據(jù)交給一個(gè)專門的清洗函數(shù)處理處理完再手動(dòng)塞回編輯器。關(guān)鍵是清洗規(guī)則要做到既不漏掉Office垃圾又不過度殺傷原文格式。3.1 攔截粘貼事件與數(shù)據(jù)獲取umeditor實(shí)例化之后可以直接拿它的DOM容器綁定paste監(jiān)聽。多數(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); } // 沒有HTML內(nèi)容說明是純文本粘貼直接放行 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)行為被中斷后剪貼板的訪問權(quán)限也跟著變了。穩(wěn)妥的做法是先把html讀出來再阻止默認(rèn)行為或者像上面代碼里那樣把清洗邏輯放進(jìn)setTimeout里延后執(zhí)行。3.2 清洗函數(shù)的具體實(shí)現(xiàn)清洗函數(shù)cleanWordHtml的核心目標(biāo)很明確刪除Office專屬標(biāo)記保留語義化標(biāo)簽剝離危險(xiǎn)屬性。我把完整實(shí)現(xiàn)放出來你可以直接復(fù)制到站群的公共JS里function cleanWordHtml(html) { if (!html) return ; // 1. 移除office XML聲明、條件注釋、所有無用標(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:開頭的VML .replace(/\/?w:[^]*/gi, ) // 去w:開頭的Word標(biāo)記 .replace(/\/?st1:[^]*/gi, ) // 去st1:開頭的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開頭和css語言標(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; // 過濾掉所有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留下的語言標(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)置類名 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這類東西基本絕跡了而加粗、斜體、列表、表格、圖片這些語義化標(biāo)簽都能保住。我強(qiáng)烈建議用DOMParser做解析而不是純正則——Word生成的HTML嵌套很深純正則在復(fù)雜嵌套下很容易誤傷DOM解析更可靠。3.3 保留格式的取舍策略清洗做太過也有問題這是我在站群實(shí)際運(yùn)營中逐步調(diào)整出來的平衡。一開始我圖省事直接取text/plain粘貼結(jié)果編輯炸了——從Word復(fù)制的表格全沒了變成一行行tab分隔的純文本。后來改成全清洗、只留語義標(biāo)簽的方案才算真正可落地。我這里說的保留范圍是這樣的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ì)說。a標(biāo)簽保留href和title但去掉target——站群內(nèi)的文章鏈接統(tǒng)一要求新窗口打開規(guī)則由模板決定。再強(qiáng)調(diào)一點(diǎn)清洗不是越干凈越好。如果站點(diǎn)模板依賴于某種特定的段落格式約定比如技術(shù)參數(shù)表固定兩列過度刪除樣式會(huì)導(dǎo)致前臺(tái)表格沒邊框沒間距。建議清洗函數(shù)做成參數(shù)可配置的像上面代碼里的filter函數(shù)將來可以根據(jù)站點(diǎn)模板動(dòng)態(tài)調(diào)整。4. 后端HTML凈化為站群內(nèi)容做雙保險(xiǎn)前端攔截解決了90%的日常粘貼問題但兩條漏網(wǎng)路徑依然存在一是某些低版本瀏覽器或者內(nèi)核特殊的國產(chǎn)瀏覽器剪貼板事件拿不到text/html前端清洗根本不會(huì)觸發(fā)二是編輯可能會(huì)從郵件客戶端、網(wǎng)頁、PDF里復(fù)制內(nèi)容這些來源同樣可能帶來非語義化的HTML甚至夾帶XSS攻擊代碼。所以我在站群的每個(gè)站點(diǎn)根目錄下都部署了一層后端HTML凈化邏輯統(tǒng)一放在公共函數(shù)庫里。4.1 為什么不能用簡單strip_tags很多人覺得后端凈化就是strip_tags一下危險(xiǎn)標(biāo)簽全沒了順便把垃圾也清了。這個(gè)思路有個(gè)致命問題strip_tags只按標(biāo)簽名刪不管屬性里的危險(xiǎn)內(nèi)容。Word粘貼產(chǎn)生的樣式里面雖然不含腳本但如果哪個(gè)編輯手滑復(fù)制了一段帶onerror的imgstrip_tags是攔不住的。加上站群內(nèi)容會(huì)被搜索引擎大量收錄萬一中招的都是公開頁面影響面會(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); // 如果正文里帶過大的內(nèi)聯(lián)樣式就不需要了直接關(guān)掉style $config-set(CSS.AllowTricky, false); $purifier new HTMLPurifier($config); $cleanHtml $purifier-purify($dirtyHtml); // 清理過長的空段落Word粘貼經(jīng)常產(chǎn)生連續(xù)多個(gè)pbr/p $cleanHtml preg_replace(#(pbr/?\s*/p){2,}#i, pbr/p, $cleanHtml); return $cleanHtml; }這層凈化解決的核心問題不是格式——格式是前端的事——而是安全兜底和HTML合規(guī)性。HTMLPurifier會(huì)把所有不被允許的標(biāo)簽、屬性、CSS聲明全丟掉輸出一個(gè)干凈、語義化、沒有XSS風(fēng)險(xiǎn)的HTML片段。站群的后臺(tái)保存接口統(tǒng)一調(diào)用這個(gè)函數(shù)保證入庫的每篇文章都經(jīng)過了白名單過濾。搞這塊的時(shí)候我踩了一個(gè)性能的坑某次編輯粘貼了一篇64頁的PDF轉(zhuǎn)Word文檔整段HTML文本有300多KBpurify跑了接近兩秒接口超時(shí)。后面我加了一層判斷如果strlen($dirtyHtml)超過200KB就先用mb_substr截?cái)嗟胶侠黹L度再處理——其實(shí)這種超長文本來就應(yīng)該拆成多段處理不該一次性塞進(jìn)編輯器。4.3 圖片的特殊處理服務(wù)器端的凈化還會(huì)順手處理一類問題Word粘貼的圖片經(jīng)常是base64編碼的內(nèi)嵌圖片HTML里長這樣img srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...這種圖片直接保存會(huì)把數(shù)據(jù)庫撐爆而且圖片無法被搜索引擎抓取訪問量大的頁面還會(huì)拖慢加載速度。我建議在保存接口里做一個(gè)檢測凡是以data:image開頭的src統(tǒng)一轉(zhuǎn)存到站群的CDN路徑生成一個(gè)新文件名再把src替換成真實(shí)URL。站群后臺(tái)如果用的對(duì)象存儲(chǔ)這一步也很好封裝。我后面再細(xì)說這個(gè)先不急。5. 實(shí)測中的典型坑位與針對(duì)性修復(fù)方案上線后我觀察了編輯部兩周多的實(shí)際使用情況大部分問題確實(shí)消失了但又有幾個(gè)新坑冒出來。這些坑特別有代表性單獨(dú)列出來說一下。5.1 表格粘貼后沒有邊框了前端清洗把Word表格內(nèi)聯(lián)樣式里的border、cellspacing等屬性全清掉了但站群前臺(tái)模板對(duì)表格的默認(rèn)樣式比較弱導(dǎo)致從Word粘貼過來的表格在前臺(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)一的視覺樣式。這比從Word里繼承一堆border-color:#7f9db9之類的破碎樣式可靠得多。5.2 表格列寬撐破版面Word表格經(jīng)常給td寫入width: 112px這種絕對(duì)像素值在站群窄欄里一旦列數(shù)多就必然溢出。我在項(xiàng)目里引入了一個(gè)簡單的后處理用正則把所有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í)行保證入庫內(nèi)容本身就是自適應(yīng)列寬的形態(tài)。5.3 圖片base64導(dǎo)致的存儲(chǔ)壓力這是最隱蔽的坑。編輯從Word里拖一張高清設(shè)備照片進(jìn)去umeditor界面上看到的是正常的圖片但源代碼模式里是一長串base64字符串。三個(gè)月的站群運(yùn)營下來數(shù)據(jù)庫體積漲了1.7倍排查半天才發(fā)現(xiàn)是粘貼圖片導(dǎo)致的。我先在umeditor配置里開了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寫進(jìn)一個(gè)臨時(shí)字段等上傳完成再更新到文章正文里避免用戶點(diǎn)保存時(shí)轉(zhuǎn)圈太久。不過如果文章量不大同步處理也能接受。5.4 空段落堆積導(dǎo)致間距異常前端清洗里我刪除了空的span也刪了沒有內(nèi)容的p但Word還遺留一種情況段落里有且僅有br一個(gè)接一個(gè)比如pbr/ppbr/p。這種在umeditor編輯區(qū)里看起來就是幾行空白前臺(tái)渲染時(shí)會(huì)產(chǎn)生很大的垂直留白。我后來在上面的清洗代碼里直接加了一步正則合并把連續(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í)測下來主要是老版本Edge和360安全瀏覽器的兼容模式。兜底方案是給umeditor加一個(gè)粘貼后自動(dòng)清理的鉤子在afterpaste事件里對(duì)整個(gè)編輯器內(nèi)容區(qū)再執(zhí)行一次cleanWordHtml——這個(gè)鉤子觸發(fā)時(shí)內(nèi)容已經(jīng)被瀏覽器寫進(jìn)去了所以只做后置清洗相當(dāng)于把漏網(wǎng)之魚再撈一遍。editor.addListener(afterpaste, function () { var body editor.body; var html body.innerHTML; var cleanHtml cleanWordHtml(html); if (cleanHtml ! html) { editor.setContent(cleanHtml, true); } });不過要注意afterpaste里如果直接用setContent會(huì)強(qiáng)制移動(dòng)光標(biāo)位置編輯在中途被打斷。所以我同時(shí)把光標(biāo)位置緩存下來清洗結(jié)束后再恢復(fù)。實(shí)現(xiàn)起來不算復(fù)雜這里就不展開了。5.6 站群多站點(diǎn)配置的同步管理最后說一個(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)的編輯器頁面都引用同一個(gè)文件。本地上線前先在staging站點(diǎn)做一輪批量歷史文章的重清洗測試確認(rèn)沒破壞舊數(shù)據(jù)再推到生產(chǎn)站群。這套流程能確保站群所有站點(diǎn)執(zhí)行的是同一套清洗邏輯不會(huì)出現(xiàn)各改各的、互相打架的情況。6. 寫在最后這套方案實(shí)際運(yùn)行下來的體會(huì)如果讓我總結(jié)這件事最核心的教訓(xùn)那就是Word導(dǎo)入兼容性問題不能靠編輯器設(shè)置里點(diǎn)幾下解決它本質(zhì)上是剪貼板數(shù)據(jù)、前端清洗、后端凈化、前臺(tái)CSS四層之間的協(xié)作問題缺一層都會(huì)出幺蛾子。上線這套方案大概兩個(gè)月后編輯部關(guān)于格式亂了的求助工單從每周十幾條降到了偶爾一兩條剩下的基本都是特殊排版需求比如復(fù)雜的合并單元格表格。內(nèi)容入庫的HTML體積也小了很多Word粘貼一篇文章的代碼量從平均30KB降到了8KB左右數(shù)據(jù)庫瘦身效果明顯。我個(gè)人建議如果你也在維護(hù)類似的站群一定要把這套清洗邏輯沉淀成公共組件不要每改一個(gè)站點(diǎn)就復(fù)制粘貼一遍代碼。畢竟項(xiàng)目的核心價(jià)值是內(nèi)容的持續(xù)生產(chǎn)而不是反復(fù)折騰一個(gè)粘貼問題。希望這篇分享能幫你把這塊硬骨頭啃下來讓編輯能多花點(diǎn)時(shí)間在內(nèi)容上少跟格式較勁。