富文本編輯器兼容Word粘貼：原理、清洗與跨瀏覽器實(shí)現(xiàn))
接手過一個(gè)內(nèi)部協(xié)同辦公項(xiàng)目那才叫酸爽。富文本編輯器上線不到一周客服那邊就轉(zhuǎn)來了幾十條吐槽“從Word復(fù)制過來的內(nèi)容要么樣式全亂要么表格擠成一團(tuán)還有的干脆貼進(jìn)去只剩純文本配圖全部消失?！蔽掖蜷_后臺(tái)一看復(fù)制前后完全是兩個(gè)世界。就問你一個(gè)做網(wǎng)頁編輯器的如果連用戶最常用的“從Word粘貼”都搞不定這產(chǎn)品還怎么推所以這次我就打算把自己在跨平臺(tái)富文本編輯器里兼容Word粘貼功能的方案、原理、代碼和踩過的坑一次性整理出來。內(nèi)容包括為什么Word粘貼的內(nèi)容在網(wǎng)頁里那么容易亂、剪貼板里到底藏著什么數(shù)據(jù)、怎么讀取和清洗這些數(shù)據(jù)、如何處理圖片和表格、以及不同瀏覽器和操作系統(tǒng)上的各種差異。不管你是自己寫編輯器還是在維護(hù)現(xiàn)有的富文本組件這篇文章應(yīng)該都能讓你少走很多彎路。1. 核心痛點(diǎn)與需求拆解1.1 為什么Word粘貼到網(wǎng)頁里總是“亂掉”先說一個(gè)直觀的現(xiàn)象你在Word里排版好好的標(biāo)題黑體加粗、正文字號(hào)統(tǒng)一、表格有邊框底紋可一粘貼到網(wǎng)頁編輯器里要么直接變成一堆無格式的文字要么變成滿屏不認(rèn)識(shí)的HTML標(biāo)簽樣式像被人踩過一腳。這個(gè)問題的根源在于Office軟件自成一派的文檔模型。Word保存內(nèi)容時(shí)不是像普通網(wǎng)頁那樣用干凈的HTML結(jié)構(gòu)而是用一套非常復(fù)雜的XMLOOXML描述文檔結(jié)構(gòu)。當(dāng)你從Word復(fù)制內(nèi)容時(shí)系統(tǒng)會(huì)把內(nèi)容轉(zhuǎn)換成好幾種格式放進(jìn)剪貼板其中就包括一份HTML但這份HTML里塞滿了Office專用的標(biāo)簽和類名。舉個(gè)例子你在Word里復(fù)制了一個(gè)標(biāo)題剪貼板里的HTML可能是這樣的h1 stylefont-size:16.0pt;font-family:SimSun;mso-font-kerning:18.0pt;... ...... /h1里面大量出現(xiàn)mso-開頭的內(nèi)聯(lián)樣式和古怪的類名比如MsoNormal、MsoHeader、MsoTableGrid。這些樣式瀏覽器根本不認(rèn)識(shí)但瀏覽器會(huì)嘗試解析它。結(jié)果就是編輯器接收了一堆垃圾樣式渲染時(shí)自然變得不可控。1.2 跨平臺(tái)到底“跨”的是什么標(biāo)題里說的是“跨平臺(tái)”這個(gè)概念很容易被忽略。實(shí)際上這個(gè)“跨”至少包含四個(gè)維度操作系統(tǒng)維度Windows、macOS、Linux、Android、iOS。辦公軟件維度微軟Word、WPS Office、LibreOffice Writer、Google Docs等。瀏覽器維度Chrome、Firefox、Safari、Edge包括國內(nèi)常見的Chromium套殼瀏覽器。輸入設(shè)備維度臺(tái)式機(jī)、筆記本、平板、手機(jī)。移動(dòng)端的剪貼板能力限制更多尤其是iOS Safari。這就像做一套通用適配任何一環(huán)不給力結(jié)果就是用戶來罵你。最典型的是macOS上的WPS粘貼和Windows上的Microsoft Word粘貼剪貼板里的HTML結(jié)構(gòu)差異非常大。同樣一篇文檔在不同平臺(tái)上復(fù)制出來后臺(tái)可能收到完全不同的標(biāo)簽結(jié)構(gòu)、樣式寫法、圖片嵌入方式。1.3 用戶真正想要的是“保持所見即所得”搞清楚用戶預(yù)期也很關(guān)鍵。練習(xí)重點(diǎn)并不是讓粘貼后的內(nèi)容變得完美無瑕而是讓用戶在絕大多數(shù)場景下感覺“跟我在Word里看到的基本一致”。我后來把需求拆成三條作為技術(shù)選型的判斷標(biāo)準(zhǔn)文字和段落格式標(biāo)題、加粗、斜體、下劃線、字號(hào)、顏色、列表、對(duì)齊方式要盡量保留。表格和圖片表格結(jié)構(gòu)不能亂圖片要能顯示最好能上傳到服務(wù)器而不是一個(gè)本地file://鏈接。干凈和安全不能把一堆Office私有的樣式、腳本、空標(biāo)簽塞進(jìn)正文里否則前端樣式會(huì)被帶亂還有XSS風(fēng)險(xiǎn)?；谶@三條我采用了“白名單清洗圖片上傳結(jié)構(gòu)性轉(zhuǎn)換”的混合方案。下面詳細(xì)說。2. 技術(shù)原理與方案選型2.1 剪貼板數(shù)據(jù)里到底有什么瀏覽器中監(jiān)聽paste事件時(shí)事件對(duì)象是一個(gè)ClipboardEvent里面有一個(gè)clipboardData對(duì)象。這個(gè)對(duì)象的數(shù)據(jù)類型和內(nèi)容取決于你復(fù)制內(nèi)容的源應(yīng)用。對(duì)于Word粘貼來說clipboardData通常會(huì)有以下幾種數(shù)據(jù)MIME類型內(nèi)容說明text/plain純文本基本上所有應(yīng)用都會(huì)提供text/html帶HTML標(biāo)記的文本這是富文本粘貼的核心text/rtfRTF格式文本有時(shí)可以從這里拿到更完整的信息Files或items可能包含圖片位圖數(shù)據(jù)PNG、Bitmap或其他文件在代碼里你可以這樣打印出來看看document.addEventListener(paste, function (event) { const clipboardData event.clipboardData || window.clipboardData; if (!clipboardData) return; const items clipboardData.items; for (let i 0; i items.length; i) { const item items[i]; console.log(kind:, item.kind, type:, item.type); } console.log(text/plain:, clipboardData.getData(text/plain)); console.log(text/html:, clipboardData.getData(text/html)); });實(shí)測下來Windows Office Word一般會(huì)給你一份非常完整的text/html里面全是mso-系列樣式和!-- [if gte mso 9]xml...這種條件注釋。WPS則相對(duì)克制一些但仍會(huì)帶一些私有標(biāo)簽。macOS的Pages粘貼出來的HTML結(jié)構(gòu)則相對(duì)干凈但樣式寫法又不一樣。還有一個(gè)容易忽略的有些應(yīng)用粘貼時(shí)還會(huì)附帶圖片而且圖片不是以img標(biāo)簽形式放進(jìn)HTML里的而是作為二進(jìn)制文件存在items里。如果你只處理getData(text/html)圖片就會(huì)丟失。2.2 不同方案之間的取舍我在實(shí)現(xiàn)前先對(duì)比了市面上幾種常見處理方案方案A直接丟棄HTML只保留純文本這是最簡單的做法。粘貼事件觸發(fā)后直接event.preventDefault()然后把純文本插入編輯器。好處是絕對(duì)安全沒有樣式污染也不存在數(shù)據(jù)失真的問題。壞處是用戶從Word辛辛苦苦排的版全沒保留粘貼過來跟重新打一遍沒區(qū)別。這種方法通常用在內(nèi)置聊天框、評(píng)論輸入框這些場景不適合真正的“文檔編輯器”。方案B把text/html原封不動(dòng)塞進(jìn)編輯器也很簡單直接插進(jìn)去。但效果就是開頭說的那些問題一大票mso-樣式、條件注釋、Office的XML命名空間、怪異的class名全部進(jìn)來前端樣式能不亂才怪。還有安全風(fēng)險(xiǎn)如果Word文檔里有超鏈接、腳本處理不好就是XSS漏洞。方案C清洗HTML后再插入白名單方案這就是最終采用的方案。讀取text/html之后經(jīng)過一系列DOM遍歷和清洗把Office垃圾標(biāo)簽、私有樣式、危險(xiǎn)協(xié)議都干掉只保留允許的白名單標(biāo)簽和安全的樣式屬性再插入編輯器。這套思路特別適合需要保留文檔語義又不想被垃圾標(biāo)簽污染的場景。方案D深度還原轉(zhuǎn)換成編輯器自定義模型這個(gè)只有在復(fù)雜編輯器產(chǎn)品中才會(huì)做比如騰訊文檔、飛書文檔。它們會(huì)把剪貼板內(nèi)容解析成自己的文檔模型再經(jīng)過一系列操作在頁面上重繪。好處是對(duì)格式的控制力極強(qiáng)可以實(shí)現(xiàn)“像素級(jí)還原”。壞處是開發(fā)量極大需要投入大量人力去解析OOXML、處理各種邊角情況。對(duì)于一般項(xiàng)目來說性價(jià)比不夠高。我后來的選擇就是方案C配套做一些圖片上傳和表格結(jié)構(gòu)規(guī)整在成本和體驗(yàn)之間取了平衡點(diǎn)。2.3 為什么還要額外處理跨平臺(tái)差異如果只是在上文說到的每個(gè)瀏覽器各自的數(shù)據(jù)格式中做處理那還不夠?？缙脚_(tái)的核心問題在于同一個(gè)操作在不同平臺(tái)上的行為是完全不一樣的。舉幾個(gè)最典型的Safari特別是iOS上剪貼板經(jīng)常拿不到text/html。蘋果出于安全策略某些時(shí)候只給你text/plain或者items里沒有text/html。這就要求你做好降級(jí)處理。Android版Chrome上從Word復(fù)制粘貼時(shí)text/html里的圖片通常不是Base64嵌入而是以blob:URL形式出現(xiàn)。這些URL在粘貼后可能會(huì)失效需要你重新抓取二進(jìn)制再上傳。Firefox對(duì)clipboardData.items的支持一直不太一樣。雖然現(xiàn)在情況好了但早幾年你需要退回去用event.clipboardData.getData這條路。EdgeChromium版的粘貼數(shù)據(jù)與其他Chromium瀏覽器基本一致但舊版EdgeHTML內(nèi)核完全是另一套邏輯。好在現(xiàn)在老Edge已經(jīng)退市不過國內(nèi)仍可能遇到老版本用戶。所以說跨平臺(tái)不是一句空話你在寫代碼時(shí)就必須把每條路徑都考慮進(jìn)去。3. 實(shí)操步驟與核心代碼實(shí)現(xiàn)3.1 攔截粘貼事件與讀取數(shù)據(jù)第一步肯定是監(jiān)聽paste事件。在事件處理中我們優(yōu)先希望拿到text/html如果拿不到就退回到text/plain。這里有一點(diǎn)要注意在事件監(jiān)聽器里讀取剪貼板數(shù)據(jù)通常不能放在異步任務(wù)中執(zhí)行否則某些瀏覽器會(huì)清空數(shù)據(jù)或者觸發(fā)安全限制。所以讀取數(shù)據(jù)的動(dòng)作必須同步完成后續(xù)的清洗和插入可以交給異步處理。我寫了一個(gè)基礎(chǔ)版本editor.addEventListener(paste, function (e) { // 1. 嘗試獲取剪貼板內(nèi)容 const clipboardData e.clipboardData || window.clipboardData; if (!clipboardData) return; // 2. 優(yōu)先讀取text/html let html clipboardData.getData(text/html); const plainText clipboardData.getData(text/plain); // 3. 如果沒有html就用純文本 if (!html || !html.trim()) { insertPlainText(plainText); e.preventDefault(); return; } // 4. 有html就走清洗流程 e.preventDefault(); const cleanedHtml cleanOfficeHtml(html); insertHtml(cleanedHtml); });實(shí)際項(xiàng)目中“insertPlainText”和“insertHtml”都要依賴你編輯器底層的能力。如果你是直接用contenteditable那么可以用document.execCommand(insertHTML, ...)去插入HTML雖然也被標(biāo)記了deprecated但目前各大瀏覽器還沒完全移除或者在編輯器自定義的內(nèi)嵌框架里插入。更現(xiàn)代的做法是用Selection和Range對(duì)象操作或者使用編輯器框架提供的API。這些要根據(jù)你的具體技術(shù)棧來定。3.2 白名單清洗干掉Office垃圾清洗HTML是整個(gè)方案中最核心、也最容易寫崩的一步。不能簡單粗暴地替換字符串必須基于真實(shí)DOM樹進(jìn)行操作因?yàn)镺ffice生成的HTML層級(jí)嵌套非常復(fù)雜正則表達(dá)式根本處理不了。我的做法是先把HTML字符串丟給瀏覽器解析成DOM然后在DOM樹上深度遍歷執(zhí)行過濾、屬性重寫、結(jié)構(gòu)修復(fù)最后再序列化。核心步驟有以下幾個(gè)第一步剔除條件注釋和XML命名空間Office粘貼出來的HTML通常帶有!-- [if gte mso 9]xml.../xml![endif] --這段注釋以及xmlns:o、xmlns:w這些命名空間屬性。它們對(duì)瀏覽器沒有任何意義可以直接刪掉。第二步建立白名單標(biāo)簽和屬性我會(huì)維護(hù)一套允許的標(biāo)簽集合比如p、br、strong、b、em、i、u、h1~h6、ul、ol、li、blockquote、a、table、thead、tbody、tr、td、th、span、img。其他標(biāo)簽凡是Office自己創(chuàng)造的怪標(biāo)簽比如v:*、o:*、xml、st1:*一律刪除但保留其文本內(nèi)容。屬性方面只允許href、target、src、width、height、colspan、rowspan、border等少量屬性。其他比如name、type、value屬性除非特殊情況一般也不要。第三步清理style屬性style屬性是重災(zāi)區(qū)。Office會(huì)塞進(jìn)去mso-*樣式、各種font-family字體、font-size:10.5pt這種單位。我們的策略是只保留一小部分安全的樣式text-align、color、background-color、font-weight、font-style、text-decoration、white-space、width、height等。并且還要把pt單位轉(zhuǎn)換成px因?yàn)榫W(wǎng)頁里pt在不同渲染環(huán)境下表現(xiàn)不穩(wěn)定。1pt約等于1.333px但最好用瀏覽器實(shí)際計(jì)算后的像素值替換。這部分可以用循環(huán)遍歷帶style屬性的節(jié)點(diǎn)解析后重建。第四步處理font標(biāo)簽和span標(biāo)簽舊版Office喜歡用font size3 color#000000 faceSimSun這種標(biāo)簽。HTML5里font標(biāo)簽已經(jīng)廢了清理時(shí)直接把它轉(zhuǎn)換成span并把對(duì)應(yīng)的樣式遷移到span上。還有那些帶了一長串classMsoNormal的標(biāo)簽清洗時(shí)可以脫掉這些class。下面我給出一個(gè)簡化但可運(yùn)行的清洗函數(shù)示例const ALLOWED_TAGS new Set([ p, br, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, a, table, thead, tbody, tr, td, th, span, img ]); const ALLOWED_ATTRS new Set([ href, target, src, alt, width, height, colspan, rowspan, border ]); const ALLOWED_STYLES new Set([ text-align, color, background-color, font-weight, font-style, text-decoration, white-space, width, height ]); function cleanOfficeHtml(html) { const doc new DOMParser().parseFromString(html, text/html); // 移除Office條件注釋 const comments []; const walker doc.createTreeWalker(doc.body, NodeFilter.SHOW_COMMENT); while (walker.nextNode()) { comments.push(walker.currentNode); } comments.forEach(node node.remove()); // 遍歷所有元素節(jié)點(diǎn) const allElements Array.from(doc.body.querySelectorAll(*)); allElements.forEach(node { // 處理不允許的標(biāo)簽 const tagName node.tagName.toLowerCase(); if (!ALLOWED_TAGS.has(tagName)) { // 圖片例外base64或blob:src的img要保留 if (tagName img node.getAttribute(src)) { // 保留但繼續(xù)處理 } else { // 創(chuàng)建文本節(jié)點(diǎn)替換 const text document.createTextNode(node.textContent || ); node.parentNode.replaceChild(text, node); return; } } // 移除非白名單屬性 Array.from(node.attributes).forEach(attr { const attrName attr.name.toLowerCase(); if (!ALLOWED_ATTRS.has(attrName)) { node.removeAttribute(attr.name); } }); // 清洗style屬性 const styleText node.getAttribute(style); if (styleText) { const cleanStyle {}; styleText.split(;).forEach(item { const [prop, value] item.split(:).map(s s.trim().toLowerCase()); if (ALLOWED_STYLES.has(prop) value) { cleanStyle[prop] value; } }); if (Object.keys(cleanStyle).length 0) { node.setAttribute(style, Object.entries(cleanStyle) .map(([k, v]) ${k}:${v}).join(;)); } else { node.removeAttribute(style); } } }); return doc.body.innerHTML; }這個(gè)函數(shù)是個(gè)基礎(chǔ)版真實(shí)項(xiàng)目中我還會(huì)做更多處理比如把font faceSimSun轉(zhuǎn)成span stylefont-family: SimSun;把table styleborder: 1pt solid windowtext;處理成帶邊框的表格甚至還要處理單元格合并的情況。那些第二版、第三版迭代的經(jīng)驗(yàn)文章我已經(jīng)發(fā)過很多篇這里就不全重復(fù)了。3.3 處理圖片和表格圖片是Word粘貼里最容易丟的一環(huán)。最常遇到的兩種圖片形式是text/html里直接有一個(gè)img標(biāo)簽src是Base64編碼的data URL。clipboardData.items里包含圖片文件HTML里只有占位符引用。對(duì)于第一種你可以直接保留Base64但如果是大圖片還是建議先上傳到你自己的服務(wù)器或?qū)ο蟠鎯?chǔ)替換成線上URL否則編輯器內(nèi)容會(huì)越存越大加載時(shí)也會(huì)卡。對(duì)于第二種比較麻煩。你得在paste事件里同步取出圖片的File對(duì)象然后走上傳邏輯再把上傳后的URL回填到img的src里。因?yàn)樽x文件是異步的你還得做好標(biāo)志位處理避免重復(fù)插入。處理圖片的代碼大致是這樣function extractImagesFromClipboard(clipboardData) { const images []; const items clipboardData.items; for (let i 0; i items.length; i) { const item items[i]; if (item.kind file item.type.startsWith(image/)) { const file item.getAsFile(); if (file) { images.push(file); } } } return images; }拿到圖片文件后調(diào)用你自己的上傳接口。這里需要注意的是不能用全局變量傳遞狀態(tài)建議用Promise將上傳結(jié)果與插入操作串起來。表格這一塊也有講究。Word生成的表格HTML通常像這樣table classMsoNormalTable border1 cellpadding0 cellspacing0 styleborder-collapse:collapse;... tr styleheight:23.5pt; td stylewidth:52.5pt;border:solid windowtext 1.0pt;...清洗時(shí)如果不加處理border:solid windowtext 1.0pt這種值會(huì)讓表格邊框顯示成一圈黑色粗線非常丑。我的做法是把border:solid windowtext 1.0pt統(tǒng)一替換成border:1px solid #ddd。如果單元格原文檔里沒有背景色直接刪掉background相關(guān)樣式讓網(wǎng)頁默認(rèn)的表格樣式接管。設(shè)置border-collapse: collapse保證單元格之間沒有縫隙。對(duì)合并單元格的colspan、rowspan屬性保留但確保值是數(shù)字防止Office寫出亂七八糟的值來。實(shí)際處理表格的時(shí)候最好先用瀏覽器把表格渲染成可視化HTML看一遍效果再寫清洗函數(shù)這樣可以大大減少試錯(cuò)成本。3.4 跨平臺(tái)分支處理前面講了原理和代碼現(xiàn)在說說跨平臺(tái)到底怎么踩住這些坑。我更愿意把這步稱為“兜底邏輯”瀏覽器能力檢測function isClipboardDataAvailable(event) { return !!(event.clipboardData event.clipboardData.items); } function getHtmlFromClipboard(event) { const clipboardData event.clipboardData; if (!clipboardData) return ; try { // 有些瀏覽器直接getData可能拋異常 const html clipboardData.getData(text/html); return html; } catch (e) { return ; } }Mobile Safari的特殊處理在iOS上getData(text/html)經(jīng)常會(huì)返回空字符串。如果檢測到?jīng)]有HTML就改用text/plain。插進(jìn)去之后至少用戶還能看到文字只是樣式丟失。這個(gè)降級(jí)是沒辦法的不要硬剛。Chrome on Android的特殊處理Android上Chrome從Word復(fù)制出來的HTML里圖片src可能是blob:開頭。這種URL只在當(dāng)前頁面session內(nèi)有效刷新后就斷了。所以圖片清洗統(tǒng)一處理只要是blob:或非http(s)協(xié)議一律提取文件重新上傳。Windows上的“圖片為曲面”問題其實(shí)Windows上還有一個(gè)“坑”叫無站點(diǎn)的OLE對(duì)象。比如從Word復(fù)制一個(gè)SmartArt圖形、文本框或者域代碼它在剪貼板HTML里只是一個(gè)o:p或v:shape標(biāo)簽沒有直接的圖片。我們清洗時(shí)會(huì)把它們刪掉但用戶會(huì)感覺“怎么少了一塊內(nèi)容”。這個(gè)目前沒有一個(gè)完全通用的解法因?yàn)橐€原OLE內(nèi)容只能解析OOXML太復(fù)雜了。我后來的處理是檢測到這類對(duì)象時(shí)盡量把它截取下來用Word復(fù)制成的“圖片格式”上傳顯示至少讓內(nèi)容不丟失。這活兒不輕松但值得做。3.5 公式、特殊對(duì)象的兼容思路熱詞里有人提“公式圖片轉(zhuǎn)Word”也有人提“Word公式轉(zhuǎn)Latex”。這兩種場景在富文本編輯器里的表現(xiàn)是不同的。如果用戶用MathType輸入公式再復(fù)制到WordWord里公式是OLE對(duì)象粘貼到網(wǎng)頁時(shí)通常沒有成熟的HTML形態(tài)所以經(jīng)常變成空白。如果用戶用Word自帶的公式編輯器復(fù)制后的HTML里會(huì)帶有math或o:OLEObject標(biāo)簽瀏覽器解析后可能什么都沒有。我的應(yīng)對(duì)思路分成三層優(yōu)先嘗試從text/rtf里解析公式的內(nèi)容轉(zhuǎn)換成圖片或LaTeX。如果RTF解析不出來就把公式渲染的“樣子”截成圖片上傳。實(shí)在不行就留一個(gè)占位符告訴用戶“該對(duì)象暫不支持粘貼可嘗試以圖片形式粘貼”。公式這塊屬于高級(jí)玩法普通項(xiàng)目做到前兩層就足夠了。4. 常見問題與踩坑記錄4.1 為什么某些瀏覽器里拿不到text/html這個(gè)問題是最多人問的。現(xiàn)象是用戶從Word復(fù)制了一段文字粘貼到你的編輯器結(jié)果整篇都是純文本什么格式都沒有。首先排除一種情況瀏覽器出于安全策略限制不向頁面暴露剪貼板HTML數(shù)據(jù)。特別是iOS Safari和部分安卓瀏覽器的WebView。這時(shí)候你不能通過任何“純前端”手段強(qiáng)行拿到HTML只能降級(jí)成純文本粘貼。其次有一種“隱藏”情況粘貼事件里其實(shí)有HTML數(shù)據(jù)但你讀取的時(shí)機(jī)不對(duì)。前面也提到過getData必須在paste事件同步執(zhí)行。如果你把它放到了requestAnimationFrame或者setTimeout里或者經(jīng)過了一段async/await操作某些瀏覽器會(huì)返回空字符串。最后還有一種場景復(fù)制源根本不給HTML。有些辦公軟件剪貼板里只放了RTF和文本格式?jīng)]有生成HTML。這種情況下就算你技術(shù)再好瀏覽器也拿不到text/html。這時(shí)候可以考慮用RTF轉(zhuǎn)換庫比如之前我接觸過的rtf.js或者h(yuǎn)tml-js但體驗(yàn)一般不建議硬啃。4.2 粘貼后字體和字號(hào)不太對(duì)Word里你明明設(shè)置的“黑體 10.5磅”粘貼過來變成“宋體 15px”用戶當(dāng)場就想卸載你的產(chǎn)品。這個(gè)問題的核心在于style清洗的時(shí)候把font-family和font-size的值弄丟了或者沒有正確轉(zhuǎn)換單位。我的經(jīng)驗(yàn)是font-size優(yōu)先使用Word提供的數(shù)值但要把pt轉(zhuǎn)成px可以用document.createElement(span).style.fontSize 10.5pt的方式讓瀏覽器計(jì)算一下實(shí)際的px值再拿computedStyle來取。中文字體映射要做一次統(tǒng)一比如把SimSun映射成宋體, SimSun把SimHei映射成黑體, SimHeiMicrosoft YaHei映射成微軟雅黑, Microsoft YaHei。這樣在網(wǎng)頁端才能正常展示。如果Word沒有提供字號(hào)就不要自己亂加一個(gè)默認(rèn)值保持繼承關(guān)系才是最重要的。4.3 表格列寬不受控制熱詞里有“word 表格列寬無法拖動(dòng)”。這其實(shí)是很多用戶從Word復(fù)制表格到網(wǎng)頁后的真實(shí)反饋原本在Word里調(diào)得好好的列寬到了網(wǎng)頁里像鐵板一塊怎么拖都拖不動(dòng)。原因也很直白Word給每個(gè)單元格都寫死了width:52.5pt之類的樣式清洗后的表格里還帶著一堆固定的width屬性。用戶想調(diào)整列寬時(shí)卻發(fā)現(xiàn)每個(gè)單元格寬度是固定的拖這個(gè)沒反應(yīng)。我的修復(fù)方案是清洗時(shí)把單元格上的固定width全部刪掉只保留相對(duì)寬度或者百分比寬度讓表格在網(wǎng)頁里恢復(fù)“可變列寬”。如果實(shí)在需要嚴(yán)格還原原稿樣式可以給表格外層包一個(gè)固定寬度容器但內(nèi)部的列寬要允許伸縮。4.4 粘貼后光標(biāo)位置和插入順序錯(cuò)了這個(gè)問題很隱蔽表現(xiàn)是粘貼后光標(biāo)沒有出現(xiàn)在粘貼內(nèi)容末尾而是跳到了文檔開頭或者粘貼多次后內(nèi)容順序反了。大部分原因是插入操作用了execCommand(insertHTML)它內(nèi)部對(duì)光標(biāo)位置的處理在不同瀏覽器里有差異。更穩(wěn)的做法的自己獲取Selection用Range對(duì)象定位到一個(gè)準(zhǔn)確的坐標(biāo)點(diǎn)然后創(chuàng)建DocumentFragment插入。大致邏輯function insertHtmlAtCurrentPosition(html) { const selection window.getSelection(); if (!selection || selection.rangeCount 0) return; const range selection.getRangeAt(0); range.deleteContents(); const template document.createElement(div); template.innerHTML html; const fragment document.createDocumentFragment(); // 遍歷template的childNodes插入fragment while (template.firstChild) { fragment.appendChild(template.firstChild); } range.insertNode(fragment); range.collapse(false); // 折疊到內(nèi)容末尾 selection.removeAllRanges(); selection.addRange(range); }這個(gè)方案比直接execCommand更可控至少我的項(xiàng)目里換過去之后錯(cuò)序問題就統(tǒng)一解決了。4.5 移動(dòng)端粘貼WebView和原生殼的差異很多項(xiàng)目其實(shí)不是純?yōu)g覽器而是套了一個(gè)原生App的WebView。這時(shí)候剪貼板行為會(huì)受原生殼控制時(shí)好時(shí)壞。我通常建議如果你有原生端的力量盡量讓原生端攔截剪貼板內(nèi)容把處理好的干凈HTML傳給WebView。純前端方案在PC上可用率還行但移動(dòng)端受限太多能借助原生能力的話體驗(yàn)會(huì)好一個(gè)量級(jí)。5. 一些體會(huì)與建議折騰了這么久的粘貼兼容我自己最大的體會(huì)是永遠(yuǎn)不要相信某一種平臺(tái)下的結(jié)果能復(fù)制到所有平臺(tái)。你以為在Windows Chrome上測好了等用戶用macOS WPS粘貼一份帶復(fù)雜表格的文檔進(jìn)來照樣可能崩。所以測試的時(shí)候務(wù)必要搭一個(gè)“跨平臺(tái)矩陣”至少包括Windows Chrome Microsoft WordWindows Edge WPS OfficemacOS Chrome Microsoft WordmacOS Safari Pages或WPSAndroid Chrome Microsoft Word或WPSiOS Safari Microsoft Word或WPS每一條組合里都要準(zhǔn)備一份攜帶圖片、表格、多級(jí)標(biāo)題、公式的樣張去貼一遍。別嫌麻煩這一步能省下你后面大量客服對(duì)接的時(shí)間。另外清洗邏輯一定要有“版本”概念。你在Word 2021里粘貼的內(nèi)容和老版Word里粘貼出來的結(jié)構(gòu)都不一樣。線上如果出現(xiàn)新的亂版問題建議第一時(shí)間把用戶的原始粘貼HTML存下來然后丟到本地環(huán)境里跑一遍清洗對(duì)著差異把規(guī)則補(bǔ)上。數(shù)據(jù)驅(qū)動(dòng)式迭代遠(yuǎn)好過憑空想象。最后再分享一個(gè)小建議在編輯器里內(nèi)置一個(gè)“清除所有格式”的按鈕給用戶一個(gè)兜底出口。不管粘貼怎么處理總有極少數(shù)文檔瀏覽器解析不出來。這時(shí)候讓客戶自己一鍵變成純文本再重排版比什么高深算法都好使。如果你也在做類似的功能歡迎把你在某個(gè)平臺(tái)上踩到的新坑貼出來大家一起把這份“粘貼兼容避坑指南”打磨得更完整。 跨平臺(tái)富文本編輯器兼容Word粘貼：原理、清洗與跨瀏覽器實(shí)現(xiàn)
接手過一個(gè)內(nèi)部協(xié)同辦公項(xiàng)目那才叫酸爽。富文本編輯器上線不到一周客服那邊就轉(zhuǎn)來了幾十條吐槽“從Word復(fù)制過來的內(nèi)容要么樣式全亂要么表格擠成一團(tuán)還有的干脆貼進(jìn)去只剩純文本配圖全部消失?！蔽掖蜷_后臺(tái)一看復(fù)制前后完全是兩個(gè)世界。就問你一個(gè)做網(wǎng)頁編輯器的如果連用戶最常用的“從Word粘貼”都搞不定這產(chǎn)品還怎么推所以這次我就打算把自己在跨平臺(tái)富文本編輯器里兼容Word粘貼功能的方案、原理、代碼和踩過的坑一次性整理出來。內(nèi)容包括為什么Word粘貼的內(nèi)容在網(wǎng)頁里那么容易亂、剪貼板里到底藏著什么數(shù)據(jù)、怎么讀取和清洗這些數(shù)據(jù)、如何處理圖片和表格、以及不同瀏覽器和操作系統(tǒng)上的各種差異。不管你是自己寫編輯器還是在維護(hù)現(xiàn)有的富文本組件這篇文章應(yīng)該都能讓你少走很多彎路。1. 核心痛點(diǎn)與需求拆解1.1 為什么Word粘貼到網(wǎng)頁里總是“亂掉”先說一個(gè)直觀的現(xiàn)象你在Word里排版好好的標(biāo)題黑體加粗、正文字號(hào)統(tǒng)一、表格有邊框底紋可一粘貼到網(wǎng)頁編輯器里要么直接變成一堆無格式的文字要么變成滿屏不認(rèn)識(shí)的HTML標(biāo)簽樣式像被人踩過一腳。這個(gè)問題的根源在于Office軟件自成一派的文檔模型。Word保存內(nèi)容時(shí)不是像普通網(wǎng)頁那樣用干凈的HTML結(jié)構(gòu)而是用一套非常復(fù)雜的XMLOOXML描述文檔結(jié)構(gòu)。當(dāng)你從Word復(fù)制內(nèi)容時(shí)系統(tǒng)會(huì)把內(nèi)容轉(zhuǎn)換成好幾種格式放進(jìn)剪貼板其中就包括一份HTML但這份HTML里塞滿了Office專用的標(biāo)簽和類名。舉個(gè)例子你在Word里復(fù)制了一個(gè)標(biāo)題剪貼板里的HTML可能是這樣的h1 stylefont-size:16.0pt;font-family:SimSun;mso-font-kerning:18.0pt;... ...... /h1里面大量出現(xiàn)mso-開頭的內(nèi)聯(lián)樣式和古怪的類名比如MsoNormal、MsoHeader、MsoTableGrid。這些樣式瀏覽器根本不認(rèn)識(shí)但瀏覽器會(huì)嘗試解析它。結(jié)果就是編輯器接收了一堆垃圾樣式渲染時(shí)自然變得不可控。1.2 跨平臺(tái)到底“跨”的是什么標(biāo)題里說的是“跨平臺(tái)”這個(gè)概念很容易被忽略。實(shí)際上這個(gè)“跨”至少包含四個(gè)維度操作系統(tǒng)維度Windows、macOS、Linux、Android、iOS。辦公軟件維度微軟Word、WPS Office、LibreOffice Writer、Google Docs等。瀏覽器維度Chrome、Firefox、Safari、Edge包括國內(nèi)常見的Chromium套殼瀏覽器。輸入設(shè)備維度臺(tái)式機(jī)、筆記本、平板、手機(jī)。移動(dòng)端的剪貼板能力限制更多尤其是iOS Safari。這就像做一套通用適配任何一環(huán)不給力結(jié)果就是用戶來罵你。最典型的是macOS上的WPS粘貼和Windows上的Microsoft Word粘貼剪貼板里的HTML結(jié)構(gòu)差異非常大。同樣一篇文檔在不同平臺(tái)上復(fù)制出來后臺(tái)可能收到完全不同的標(biāo)簽結(jié)構(gòu)、樣式寫法、圖片嵌入方式。1.3 用戶真正想要的是“保持所見即所得”搞清楚用戶預(yù)期也很關(guān)鍵。練習(xí)重點(diǎn)并不是讓粘貼后的內(nèi)容變得完美無瑕而是讓用戶在絕大多數(shù)場景下感覺“跟我在Word里看到的基本一致”。我后來把需求拆成三條作為技術(shù)選型的判斷標(biāo)準(zhǔn)文字和段落格式標(biāo)題、加粗、斜體、下劃線、字號(hào)、顏色、列表、對(duì)齊方式要盡量保留。表格和圖片表格結(jié)構(gòu)不能亂圖片要能顯示最好能上傳到服務(wù)器而不是一個(gè)本地file://鏈接。干凈和安全不能把一堆Office私有的樣式、腳本、空標(biāo)簽塞進(jìn)正文里否則前端樣式會(huì)被帶亂還有XSS風(fēng)險(xiǎn)?；谶@三條我采用了“白名單清洗圖片上傳結(jié)構(gòu)性轉(zhuǎn)換”的混合方案。下面詳細(xì)說。2. 技術(shù)原理與方案選型2.1 剪貼板數(shù)據(jù)里到底有什么瀏覽器中監(jiān)聽paste事件時(shí)事件對(duì)象是一個(gè)ClipboardEvent里面有一個(gè)clipboardData對(duì)象。這個(gè)對(duì)象的數(shù)據(jù)類型和內(nèi)容取決于你復(fù)制內(nèi)容的源應(yīng)用。對(duì)于Word粘貼來說clipboardData通常會(huì)有以下幾種數(shù)據(jù)MIME類型內(nèi)容說明text/plain純文本基本上所有應(yīng)用都會(huì)提供text/html帶HTML標(biāo)記的文本這是富文本粘貼的核心text/rtfRTF格式文本有時(shí)可以從這里拿到更完整的信息Files或items可能包含圖片位圖數(shù)據(jù)PNG、Bitmap或其他文件在代碼里你可以這樣打印出來看看document.addEventListener(paste, function (event) { const clipboardData event.clipboardData || window.clipboardData; if (!clipboardData) return; const items clipboardData.items; for (let i 0; i items.length; i) { const item items[i]; console.log(kind:, item.kind, type:, item.type); } console.log(text/plain:, clipboardData.getData(text/plain)); console.log(text/html:, clipboardData.getData(text/html)); });實(shí)測下來Windows Office Word一般會(huì)給你一份非常完整的text/html里面全是mso-系列樣式和!-- [if gte mso 9]xml...這種條件注釋。WPS則相對(duì)克制一些但仍會(huì)帶一些私有標(biāo)簽。macOS的Pages粘貼出來的HTML結(jié)構(gòu)則相對(duì)干凈但樣式寫法又不一樣。還有一個(gè)容易忽略的有些應(yīng)用粘貼時(shí)還會(huì)附帶圖片而且圖片不是以img標(biāo)簽形式放進(jìn)HTML里的而是作為二進(jìn)制文件存在items里。如果你只處理getData(text/html)圖片就會(huì)丟失。2.2 不同方案之間的取舍我在實(shí)現(xiàn)前先對(duì)比了市面上幾種常見處理方案方案A直接丟棄HTML只保留純文本這是最簡單的做法。粘貼事件觸發(fā)后直接event.preventDefault()然后把純文本插入編輯器。好處是絕對(duì)安全沒有樣式污染也不存在數(shù)據(jù)失真的問題。壞處是用戶從Word辛辛苦苦排的版全沒保留粘貼過來跟重新打一遍沒區(qū)別。這種方法通常用在內(nèi)置聊天框、評(píng)論輸入框這些場景不適合真正的“文檔編輯器”。方案B把text/html原封不動(dòng)塞進(jìn)編輯器也很簡單直接插進(jìn)去。但效果就是開頭說的那些問題一大票mso-樣式、條件注釋、Office的XML命名空間、怪異的class名全部進(jìn)來前端樣式能不亂才怪。還有安全風(fēng)險(xiǎn)如果Word文檔里有超鏈接、腳本處理不好就是XSS漏洞。方案C清洗HTML后再插入白名單方案這就是最終采用的方案。讀取text/html之后經(jīng)過一系列DOM遍歷和清洗把Office垃圾標(biāo)簽、私有樣式、危險(xiǎn)協(xié)議都干掉只保留允許的白名單標(biāo)簽和安全的樣式屬性再插入編輯器。這套思路特別適合需要保留文檔語義又不想被垃圾標(biāo)簽污染的場景。方案D深度還原轉(zhuǎn)換成編輯器自定義模型這個(gè)只有在復(fù)雜編輯器產(chǎn)品中才會(huì)做比如騰訊文檔、飛書文檔。它們會(huì)把剪貼板內(nèi)容解析成自己的文檔模型再經(jīng)過一系列操作在頁面上重繪。好處是對(duì)格式的控制力極強(qiáng)可以實(shí)現(xiàn)“像素級(jí)還原”。壞處是開發(fā)量極大需要投入大量人力去解析OOXML、處理各種邊角情況。對(duì)于一般項(xiàng)目來說性價(jià)比不夠高。我后來的選擇就是方案C配套做一些圖片上傳和表格結(jié)構(gòu)規(guī)整在成本和體驗(yàn)之間取了平衡點(diǎn)。2.3 為什么還要額外處理跨平臺(tái)差異如果只是在上文說到的每個(gè)瀏覽器各自的數(shù)據(jù)格式中做處理那還不夠?？缙脚_(tái)的核心問題在于同一個(gè)操作在不同平臺(tái)上的行為是完全不一樣的。舉幾個(gè)最典型的Safari特別是iOS上剪貼板經(jīng)常拿不到text/html。蘋果出于安全策略某些時(shí)候只給你text/plain或者items里沒有text/html。這就要求你做好降級(jí)處理。Android版Chrome上從Word復(fù)制粘貼時(shí)text/html里的圖片通常不是Base64嵌入而是以blob:URL形式出現(xiàn)。這些URL在粘貼后可能會(huì)失效需要你重新抓取二進(jìn)制再上傳。Firefox對(duì)clipboardData.items的支持一直不太一樣。雖然現(xiàn)在情況好了但早幾年你需要退回去用event.clipboardData.getData這條路。EdgeChromium版的粘貼數(shù)據(jù)與其他Chromium瀏覽器基本一致但舊版EdgeHTML內(nèi)核完全是另一套邏輯。好在現(xiàn)在老Edge已經(jīng)退市不過國內(nèi)仍可能遇到老版本用戶。所以說跨平臺(tái)不是一句空話你在寫代碼時(shí)就必須把每條路徑都考慮進(jìn)去。3. 實(shí)操步驟與核心代碼實(shí)現(xiàn)3.1 攔截粘貼事件與讀取數(shù)據(jù)第一步肯定是監(jiān)聽paste事件。在事件處理中我們優(yōu)先希望拿到text/html如果拿不到就退回到text/plain。這里有一點(diǎn)要注意在事件監(jiān)聽器里讀取剪貼板數(shù)據(jù)通常不能放在異步任務(wù)中執(zhí)行否則某些瀏覽器會(huì)清空數(shù)據(jù)或者觸發(fā)安全限制。所以讀取數(shù)據(jù)的動(dòng)作必須同步完成后續(xù)的清洗和插入可以交給異步處理。我寫了一個(gè)基礎(chǔ)版本editor.addEventListener(paste, function (e) { // 1. 嘗試獲取剪貼板內(nèi)容 const clipboardData e.clipboardData || window.clipboardData; if (!clipboardData) return; // 2. 優(yōu)先讀取text/html let html clipboardData.getData(text/html); const plainText clipboardData.getData(text/plain); // 3. 如果沒有html就用純文本 if (!html || !html.trim()) { insertPlainText(plainText); e.preventDefault(); return; } // 4. 有html就走清洗流程 e.preventDefault(); const cleanedHtml cleanOfficeHtml(html); insertHtml(cleanedHtml); });實(shí)際項(xiàng)目中“insertPlainText”和“insertHtml”都要依賴你編輯器底層的能力。如果你是直接用contenteditable那么可以用document.execCommand(insertHTML, ...)去插入HTML雖然也被標(biāo)記了deprecated但目前各大瀏覽器還沒完全移除或者在編輯器自定義的內(nèi)嵌框架里插入。更現(xiàn)代的做法是用Selection和Range對(duì)象操作或者使用編輯器框架提供的API。這些要根據(jù)你的具體技術(shù)棧來定。3.2 白名單清洗干掉Office垃圾清洗HTML是整個(gè)方案中最核心、也最容易寫崩的一步。不能簡單粗暴地替換字符串必須基于真實(shí)DOM樹進(jìn)行操作因?yàn)镺ffice生成的HTML層級(jí)嵌套非常復(fù)雜正則表達(dá)式根本處理不了。我的做法是先把HTML字符串丟給瀏覽器解析成DOM然后在DOM樹上深度遍歷執(zhí)行過濾、屬性重寫、結(jié)構(gòu)修復(fù)最后再序列化。核心步驟有以下幾個(gè)第一步剔除條件注釋和XML命名空間Office粘貼出來的HTML通常帶有!-- [if gte mso 9]xml.../xml![endif] --這段注釋以及xmlns:o、xmlns:w這些命名空間屬性。它們對(duì)瀏覽器沒有任何意義可以直接刪掉。第二步建立白名單標(biāo)簽和屬性我會(huì)維護(hù)一套允許的標(biāo)簽集合比如p、br、strong、b、em、i、u、h1~h6、ul、ol、li、blockquote、a、table、thead、tbody、tr、td、th、span、img。其他標(biāo)簽凡是Office自己創(chuàng)造的怪標(biāo)簽比如v:*、o:*、xml、st1:*一律刪除但保留其文本內(nèi)容。屬性方面只允許href、target、src、width、height、colspan、rowspan、border等少量屬性。其他比如name、type、value屬性除非特殊情況一般也不要。第三步清理style屬性style屬性是重災(zāi)區(qū)。Office會(huì)塞進(jìn)去mso-*樣式、各種font-family字體、font-size:10.5pt這種單位。我們的策略是只保留一小部分安全的樣式text-align、color、background-color、font-weight、font-style、text-decoration、white-space、width、height等。并且還要把pt單位轉(zhuǎn)換成px因?yàn)榫W(wǎng)頁里pt在不同渲染環(huán)境下表現(xiàn)不穩(wěn)定。1pt約等于1.333px但最好用瀏覽器實(shí)際計(jì)算后的像素值替換。這部分可以用循環(huán)遍歷帶style屬性的節(jié)點(diǎn)解析后重建。第四步處理font標(biāo)簽和span標(biāo)簽舊版Office喜歡用font size3 color#000000 faceSimSun這種標(biāo)簽。HTML5里font標(biāo)簽已經(jīng)廢了清理時(shí)直接把它轉(zhuǎn)換成span并把對(duì)應(yīng)的樣式遷移到span上。還有那些帶了一長串classMsoNormal的標(biāo)簽清洗時(shí)可以脫掉這些class。下面我給出一個(gè)簡化但可運(yùn)行的清洗函數(shù)示例const ALLOWED_TAGS new Set([ p, br, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, a, table, thead, tbody, tr, td, th, span, img ]); const ALLOWED_ATTRS new Set([ href, target, src, alt, width, height, colspan, rowspan, border ]); const ALLOWED_STYLES new Set([ text-align, color, background-color, font-weight, font-style, text-decoration, white-space, width, height ]); function cleanOfficeHtml(html) { const doc new DOMParser().parseFromString(html, text/html); // 移除Office條件注釋 const comments []; const walker doc.createTreeWalker(doc.body, NodeFilter.SHOW_COMMENT); while (walker.nextNode()) { comments.push(walker.currentNode); } comments.forEach(node node.remove()); // 遍歷所有元素節(jié)點(diǎn) const allElements Array.from(doc.body.querySelectorAll(*)); allElements.forEach(node { // 處理不允許的標(biāo)簽 const tagName node.tagName.toLowerCase(); if (!ALLOWED_TAGS.has(tagName)) { // 圖片例外base64或blob:src的img要保留 if (tagName img node.getAttribute(src)) { // 保留但繼續(xù)處理 } else { // 創(chuàng)建文本節(jié)點(diǎn)替換 const text document.createTextNode(node.textContent || ); node.parentNode.replaceChild(text, node); return; } } // 移除非白名單屬性 Array.from(node.attributes).forEach(attr { const attrName attr.name.toLowerCase(); if (!ALLOWED_ATTRS.has(attrName)) { node.removeAttribute(attr.name); } }); // 清洗style屬性 const styleText node.getAttribute(style); if (styleText) { const cleanStyle {}; styleText.split(;).forEach(item { const [prop, value] item.split(:).map(s s.trim().toLowerCase()); if (ALLOWED_STYLES.has(prop) value) { cleanStyle[prop] value; } }); if (Object.keys(cleanStyle).length 0) { node.setAttribute(style, Object.entries(cleanStyle) .map(([k, v]) ${k}:${v}).join(;)); } else { node.removeAttribute(style); } } }); return doc.body.innerHTML; }這個(gè)函數(shù)是個(gè)基礎(chǔ)版真實(shí)項(xiàng)目中我還會(huì)做更多處理比如把font faceSimSun轉(zhuǎn)成span stylefont-family: SimSun;把table styleborder: 1pt solid windowtext;處理成帶邊框的表格甚至還要處理單元格合并的情況。那些第二版、第三版迭代的經(jīng)驗(yàn)文章我已經(jīng)發(fā)過很多篇這里就不全重復(fù)了。3.3 處理圖片和表格圖片是Word粘貼里最容易丟的一環(huán)。最常遇到的兩種圖片形式是text/html里直接有一個(gè)img標(biāo)簽src是Base64編碼的data URL。clipboardData.items里包含圖片文件HTML里只有占位符引用。對(duì)于第一種你可以直接保留Base64但如果是大圖片還是建議先上傳到你自己的服務(wù)器或?qū)ο蟠鎯?chǔ)替換成線上URL否則編輯器內(nèi)容會(huì)越存越大加載時(shí)也會(huì)卡。對(duì)于第二種比較麻煩。你得在paste事件里同步取出圖片的File對(duì)象然后走上傳邏輯再把上傳后的URL回填到img的src里。因?yàn)樽x文件是異步的你還得做好標(biāo)志位處理避免重復(fù)插入。處理圖片的代碼大致是這樣function extractImagesFromClipboard(clipboardData) { const images []; const items clipboardData.items; for (let i 0; i items.length; i) { const item items[i]; if (item.kind file item.type.startsWith(image/)) { const file item.getAsFile(); if (file) { images.push(file); } } } return images; }拿到圖片文件后調(diào)用你自己的上傳接口。這里需要注意的是不能用全局變量傳遞狀態(tài)建議用Promise將上傳結(jié)果與插入操作串起來。表格這一塊也有講究。Word生成的表格HTML通常像這樣table classMsoNormalTable border1 cellpadding0 cellspacing0 styleborder-collapse:collapse;... tr styleheight:23.5pt; td stylewidth:52.5pt;border:solid windowtext 1.0pt;...清洗時(shí)如果不加處理border:solid windowtext 1.0pt這種值會(huì)讓表格邊框顯示成一圈黑色粗線非常丑。我的做法是把border:solid windowtext 1.0pt統(tǒng)一替換成border:1px solid #ddd。如果單元格原文檔里沒有背景色直接刪掉background相關(guān)樣式讓網(wǎng)頁默認(rèn)的表格樣式接管。設(shè)置border-collapse: collapse保證單元格之間沒有縫隙。對(duì)合并單元格的colspan、rowspan屬性保留但確保值是數(shù)字防止Office寫出亂七八糟的值來。實(shí)際處理表格的時(shí)候最好先用瀏覽器把表格渲染成可視化HTML看一遍效果再寫清洗函數(shù)這樣可以大大減少試錯(cuò)成本。3.4 跨平臺(tái)分支處理前面講了原理和代碼現(xiàn)在說說跨平臺(tái)到底怎么踩住這些坑。我更愿意把這步稱為“兜底邏輯”瀏覽器能力檢測function isClipboardDataAvailable(event) { return !!(event.clipboardData event.clipboardData.items); } function getHtmlFromClipboard(event) { const clipboardData event.clipboardData; if (!clipboardData) return ; try { // 有些瀏覽器直接getData可能拋異常 const html clipboardData.getData(text/html); return html; } catch (e) { return ; } }Mobile Safari的特殊處理在iOS上getData(text/html)經(jīng)常會(huì)返回空字符串。如果檢測到?jīng)]有HTML就改用text/plain。插進(jìn)去之后至少用戶還能看到文字只是樣式丟失。這個(gè)降級(jí)是沒辦法的不要硬剛。Chrome on Android的特殊處理Android上Chrome從Word復(fù)制出來的HTML里圖片src可能是blob:開頭。這種URL只在當(dāng)前頁面session內(nèi)有效刷新后就斷了。所以圖片清洗統(tǒng)一處理只要是blob:或非http(s)協(xié)議一律提取文件重新上傳。Windows上的“圖片為曲面”問題其實(shí)Windows上還有一個(gè)“坑”叫無站點(diǎn)的OLE對(duì)象。比如從Word復(fù)制一個(gè)SmartArt圖形、文本框或者域代碼它在剪貼板HTML里只是一個(gè)o:p或v:shape標(biāo)簽沒有直接的圖片。我們清洗時(shí)會(huì)把它們刪掉但用戶會(huì)感覺“怎么少了一塊內(nèi)容”。這個(gè)目前沒有一個(gè)完全通用的解法因?yàn)橐€原OLE內(nèi)容只能解析OOXML太復(fù)雜了。我后來的處理是檢測到這類對(duì)象時(shí)盡量把它截取下來用Word復(fù)制成的“圖片格式”上傳顯示至少讓內(nèi)容不丟失。這活兒不輕松但值得做。3.5 公式、特殊對(duì)象的兼容思路熱詞里有人提“公式圖片轉(zhuǎn)Word”也有人提“Word公式轉(zhuǎn)Latex”。這兩種場景在富文本編輯器里的表現(xiàn)是不同的。如果用戶用MathType輸入公式再復(fù)制到WordWord里公式是OLE對(duì)象粘貼到網(wǎng)頁時(shí)通常沒有成熟的HTML形態(tài)所以經(jīng)常變成空白。如果用戶用Word自帶的公式編輯器復(fù)制后的HTML里會(huì)帶有math或o:OLEObject標(biāo)簽瀏覽器解析后可能什么都沒有。我的應(yīng)對(duì)思路分成三層優(yōu)先嘗試從text/rtf里解析公式的內(nèi)容轉(zhuǎn)換成圖片或LaTeX。如果RTF解析不出來就把公式渲染的“樣子”截成圖片上傳。實(shí)在不行就留一個(gè)占位符告訴用戶“該對(duì)象暫不支持粘貼可嘗試以圖片形式粘貼”。公式這塊屬于高級(jí)玩法普通項(xiàng)目做到前兩層就足夠了。4. 常見問題與踩坑記錄4.1 為什么某些瀏覽器里拿不到text/html這個(gè)問題是最多人問的。現(xiàn)象是用戶從Word復(fù)制了一段文字粘貼到你的編輯器結(jié)果整篇都是純文本什么格式都沒有。首先排除一種情況瀏覽器出于安全策略限制不向頁面暴露剪貼板HTML數(shù)據(jù)。特別是iOS Safari和部分安卓瀏覽器的WebView。這時(shí)候你不能通過任何“純前端”手段強(qiáng)行拿到HTML只能降級(jí)成純文本粘貼。其次有一種“隱藏”情況粘貼事件里其實(shí)有HTML數(shù)據(jù)但你讀取的時(shí)機(jī)不對(duì)。前面也提到過getData必須在paste事件同步執(zhí)行。如果你把它放到了requestAnimationFrame或者setTimeout里或者經(jīng)過了一段async/await操作某些瀏覽器會(huì)返回空字符串。最后還有一種場景復(fù)制源根本不給HTML。有些辦公軟件剪貼板里只放了RTF和文本格式?jīng)]有生成HTML。這種情況下就算你技術(shù)再好瀏覽器也拿不到text/html。這時(shí)候可以考慮用RTF轉(zhuǎn)換庫比如之前我接觸過的rtf.js或者h(yuǎn)tml-js但體驗(yàn)一般不建議硬啃。4.2 粘貼后字體和字號(hào)不太對(duì)Word里你明明設(shè)置的“黑體 10.5磅”粘貼過來變成“宋體 15px”用戶當(dāng)場就想卸載你的產(chǎn)品。這個(gè)問題的核心在于style清洗的時(shí)候把font-family和font-size的值弄丟了或者沒有正確轉(zhuǎn)換單位。我的經(jīng)驗(yàn)是font-size優(yōu)先使用Word提供的數(shù)值但要把pt轉(zhuǎn)成px可以用document.createElement(span).style.fontSize 10.5pt的方式讓瀏覽器計(jì)算一下實(shí)際的px值再拿computedStyle來取。中文字體映射要做一次統(tǒng)一比如把SimSun映射成宋體, SimSun把SimHei映射成黑體, SimHeiMicrosoft YaHei映射成微軟雅黑, Microsoft YaHei。這樣在網(wǎng)頁端才能正常展示。如果Word沒有提供字號(hào)就不要自己亂加一個(gè)默認(rèn)值保持繼承關(guān)系才是最重要的。4.3 表格列寬不受控制熱詞里有“word 表格列寬無法拖動(dòng)”。這其實(shí)是很多用戶從Word復(fù)制表格到網(wǎng)頁后的真實(shí)反饋原本在Word里調(diào)得好好的列寬到了網(wǎng)頁里像鐵板一塊怎么拖都拖不動(dòng)。原因也很直白Word給每個(gè)單元格都寫死了width:52.5pt之類的樣式清洗后的表格里還帶著一堆固定的width屬性。用戶想調(diào)整列寬時(shí)卻發(fā)現(xiàn)每個(gè)單元格寬度是固定的拖這個(gè)沒反應(yīng)。我的修復(fù)方案是清洗時(shí)把單元格上的固定width全部刪掉只保留相對(duì)寬度或者百分比寬度讓表格在網(wǎng)頁里恢復(fù)“可變列寬”。如果實(shí)在需要嚴(yán)格還原原稿樣式可以給表格外層包一個(gè)固定寬度容器但內(nèi)部的列寬要允許伸縮。4.4 粘貼后光標(biāo)位置和插入順序錯(cuò)了這個(gè)問題很隱蔽表現(xiàn)是粘貼后光標(biāo)沒有出現(xiàn)在粘貼內(nèi)容末尾而是跳到了文檔開頭或者粘貼多次后內(nèi)容順序反了。大部分原因是插入操作用了execCommand(insertHTML)它內(nèi)部對(duì)光標(biāo)位置的處理在不同瀏覽器里有差異。更穩(wěn)的做法的自己獲取Selection用Range對(duì)象定位到一個(gè)準(zhǔn)確的坐標(biāo)點(diǎn)然后創(chuàng)建DocumentFragment插入。大致邏輯function insertHtmlAtCurrentPosition(html) { const selection window.getSelection(); if (!selection || selection.rangeCount 0) return; const range selection.getRangeAt(0); range.deleteContents(); const template document.createElement(div); template.innerHTML html; const fragment document.createDocumentFragment(); // 遍歷template的childNodes插入fragment while (template.firstChild) { fragment.appendChild(template.firstChild); } range.insertNode(fragment); range.collapse(false); // 折疊到內(nèi)容末尾 selection.removeAllRanges(); selection.addRange(range); }這個(gè)方案比直接execCommand更可控至少我的項(xiàng)目里換過去之后錯(cuò)序問題就統(tǒng)一解決了。4.5 移動(dòng)端粘貼WebView和原生殼的差異很多項(xiàng)目其實(shí)不是純?yōu)g覽器而是套了一個(gè)原生App的WebView。這時(shí)候剪貼板行為會(huì)受原生殼控制時(shí)好時(shí)壞。我通常建議如果你有原生端的力量盡量讓原生端攔截剪貼板內(nèi)容把處理好的干凈HTML傳給WebView。純前端方案在PC上可用率還行但移動(dòng)端受限太多能借助原生能力的話體驗(yàn)會(huì)好一個(gè)量級(jí)。5. 一些體會(huì)與建議折騰了這么久的粘貼兼容我自己最大的體會(huì)是永遠(yuǎn)不要相信某一種平臺(tái)下的結(jié)果能復(fù)制到所有平臺(tái)。你以為在Windows Chrome上測好了等用戶用macOS WPS粘貼一份帶復(fù)雜表格的文檔進(jìn)來照樣可能崩。所以測試的時(shí)候務(wù)必要搭一個(gè)“跨平臺(tái)矩陣”至少包括Windows Chrome Microsoft WordWindows Edge WPS OfficemacOS Chrome Microsoft WordmacOS Safari Pages或WPSAndroid Chrome Microsoft Word或WPSiOS Safari Microsoft Word或WPS每一條組合里都要準(zhǔn)備一份攜帶圖片、表格、多級(jí)標(biāo)題、公式的樣張去貼一遍。別嫌麻煩這一步能省下你后面大量客服對(duì)接的時(shí)間。另外清洗邏輯一定要有“版本”概念。你在Word 2021里粘貼的內(nèi)容和老版Word里粘貼出來的結(jié)構(gòu)都不一樣。線上如果出現(xiàn)新的亂版問題建議第一時(shí)間把用戶的原始粘貼HTML存下來然后丟到本地環(huán)境里跑一遍清洗對(duì)著差異把規(guī)則補(bǔ)上。數(shù)據(jù)驅(qū)動(dòng)式迭代遠(yuǎn)好過憑空想象。最后再分享一個(gè)小建議在編輯器里內(nèi)置一個(gè)“清除所有格式”的按鈕給用戶一個(gè)兜底出口。不管粘貼怎么處理總有極少數(shù)文檔瀏覽器解析不出來。這時(shí)候讓客戶自己一鍵變成純文本再重排版比什么高深算法都好使。如果你也在做類似的功能歡迎把你在某個(gè)平臺(tái)上踩到的新坑貼出來大家一起把這份“粘貼兼容避坑指南”打磨得更完整。