開發者工具 · HTML WYSIWYG 編輯器

從 Word 或 Google 檔案貼上到 Web 編輯器時會發生什麼

2026年3月26日 · 工作原理

html 內容可編輯文字清理

解釋富文字貼上所攜帶的內容，從 mso 樣式到包裝元素和字體堆疊，並展示如何在產生的標記到達您的網站之前讀取它。

在 Word 中看起來不錯 - 打開時貼上了一篇文章，其間距和字體與網站設計相衝突

從文字處理程序複製的段落可能在原始程式碼上看起來很精美，但其字體、間距和包裝與網站衝突。 ToolAcre 不會大量保留該簡報。它的貼上偵聽器會在插入原始豐富標記之前攔截該操作，並選擇過濾的表示形式。

重要的證據是來源視圖，而不是第一視覺印像是否類似於原始檔案。編輯器故意縮小範圍：標題、段落、強調、清單、引用、類似程式碼的元素和連結可以保留，而版面容器、類別名稱、id 和內聯樣式屬性不屬於其輸出契約。

剪貼簿可以公開 `text/html` 和 `text/plain` 進行一次複製操作。處理程序要求兩者都提供。當 HTML 有效負載存在時，它會清理該字串並插入具有 `insertHTML` 的重寫片段；只有當缺少豐富的 HTML 時，它才會插入具有 `insertText` 的普通有效負載。

此優先權經過程式碼驗證，適用於該面板，而不是針對每個應用程式的通用宣告。它解釋了為什麼豐富的粘貼可以保留列表，同時失去其外觀。來源應用程式編寫了剪貼簿 HTML，但 ToolAcre 的許可清單決定允許哪些部分進入可編輯表面。

不支援的元素有兩種處理方式。未知的普通包裝器會被解開，因此它們的文字會保留下來，而腳本、樣式、iframe、表單、SVG、MathML 和其他有風險或非編輯器的容器會與其內容一起被刪除。評論和文件類型也被丟棄，而不是被帶入草稿中。

屬性面向第二道門。類別、id、樣式、資料屬性和每個事件處理程序都被刪除，因為允許的屬性是按元素命名的。這意味著在 ToolAcre 過濾貼上後，特定於來源的類別名稱和內聯表示無法與目標樣式表對抗，儘管有用的來源樣式也可能會消失。

儲存庫不提供擷取的 Word 或 Google Docs 固定裝置，因此本文不會為特定版本發明確切的 `mso-` 類別、內部 ID 或包裝器序列。它可以說明白名單證明的結果：無論哪個來源應用程式提供了類別和樣式，它們都會被刪除。

與來源無關的規則比脆弱的目錄具有更強的編輯指導作用。貼上後檢查移除通知。它記錄獨特的原因，例如不支援的包裝器、禁止的屬性或拒絕的 URL。該報告告訴您此實作丟棄了什麼，而無需假裝識別最初產生每個片段的應用程式。

複製三個短段落，將中間的句子設為粗體，將最後一個句子設為列表。貼上後，切換到來源模式。 Paragraph、strong、ul 和 li 元素位於白名單內，而周圍的 div 被展開且樣式屬性消失。舊版 b 和 i 標籤標準化為 Strong 和 em。

現在在一次性來源範例中新增不安全事件屬性並返回到視覺模式。該屬性在該來源變成 DOM 之前被刪除。這表明了編輯邊界，而不是敵對提交內容的安全發布。此專案明確警告解析器差異，並需要合適的伺服器端清理程序來處理不受信任的內容。

純文字插入是後備方案，而不是此工具列中使用者可選擇的「不帶格式貼上」指令。如果剪貼簿提供 HTML，ToolAcre 將採用該分支。瀏覽器或作業系統捷徑可能會公開純貼，但儲存庫不定義或承諾特定的捷徑行為。

當只有文字可用時，`insertText` 要求瀏覽器將這些字元放在插入符號處。隨後創建的任何段落結構仍受瀏覽器編輯行為的影響。使用來源視圖添加有意的標題或列表，而不是假設其他應用程式中的換行符會自動成為您的 CMS 期望的結構。

此工作流程不保留追蹤的變更、註釋、頁面佈局、字體、顏色、表格或圖片。映像故意不存在，因為允許的映像會建立出站請求和錯誤處理程序表面。此編輯器也沒有特定於來源的清理設定檔或保證對一套辦公室套件保真度的開關。

本地貼上並不能證明最終目的地將接受相同的子集。 CMS 可以剝離更多標籤、重寫連結或強制執行自己的策略。將編輯器輸出與目標檔案進行比較，並在遺失不支援的格式會刪除資訊而不僅僅是簡報時保留原始副本。

發佈前檢視：貼上代表性的非敏感片段，閱讀刪除警告，檢查原始程式碼並預覽過濾結果。 ToolAcre 提供了明確的許可名單，而不是默默地將外國簡報帶入您的網站。這使得清理可見，但它並不能證明任意 HTML 都是安全的。

如果基本結構消失，請使用受支援的標題、段落、清單、重點和連結重建它。如果目標接受的較少，則進一步簡化。正確的工件不是對來源檔案最接近的視覺模仿；它是經過審查的標記，其含義和目標策略都是可以理解的。