HTML 所見即所得編輯器
在即時編輯器中編寫富文本並獲取生成的 HTML，支援格式、列表、連結與原始碼檢視。
在即時編輯器中編寫富文本並獲取生成的 HTML，支援格式、列表、連結與原始碼檢視。 在即時編輯器中編寫富文本並獲取生成的 HTML，支援格式、列表、連結與原始碼檢視。
背景知識
所見即所得編輯器是什麼
WYSIWYG 意為"所見即所得"。你不需要輸入原始 HTML 標籤，而是視覺化地編輯文件—— 加粗、斜體、標題、列表、連結等——編輯器會把你的操作轉換為標記。你正在看的 這個頁面使用瀏覽器內建的 contenteditable 能力和 document.execCommand API， 後者已存在十餘年且被所有主流瀏覽器支援。這裡沒有第三方庫：格式化由瀏覽器 原生完成，因此生成的 HTML 與瀏覽器為網路上任何其他可編輯區域生成的內容 完全一致。
工具欄能做什麼
工具欄覆蓋大多數人的常用操作：撤銷/重做、加粗、斜體、下劃線、刪除線、 H1-H3 標題、段落、程式碼塊、專案符號與編號列表、引用塊、連結和清除全部格式。 字型與大小選擇器改變當前選區的字型和字號。原始碼切換在渲染檢視和包含原始 HTML 的純文本域之間切換，你可以直接編輯後者。編輯器下方的統計行顯示當前 內容的字元數和詞數。
HTML 輸出如何組織
編輯器儘可能生成語義化標記而非表象化的程式碼：標題變成 <h1>/<h2>/<h3>， 列表變成 <ul>/<ol>/<li>，引用變成 <blockquote>，程式碼變成 <pre>。文本級格式 使用 <strong>、<em>、<u> 和 <del>。由於瀏覽器 execCommand 是引擎，不同瀏覽器 之間的確切標記可能略有差異——一次加粗點選在一個瀏覽器中產生 <strong>， 在另一箇中產生 <b>。為保證最大相容性，匯出的 HTML 刻意保持最小化，可直接 貼上到郵件、CMS 編輯器或文件系統中，無需額外清理。
實用技巧
切換到原始碼檢視後從輸出欄位複製匯出的 HTML，或使用"複製 HTML"按鈕。貼上到 郵件客戶端時請保持標記簡單——許多客戶端會剝離 <style> 和複雜巢狀。如果要把 內容嵌入已有樣式的頁面，優先使用語義標籤並避免內聯樣式；匯出的標記不使用 內聯樣式，因此會自然繼承頁面 CSS。本頁面所有操作都在瀏覽器本地完成，內容 不會離開頁面。
常見問題
為什麼同一個操作在不同瀏覽器中產生不同的標籤？
編輯器委託給瀏覽器原生 execCommand，而瀏覽器在輸出上略有差異（例如 <strong> 與 <b>、<i> 與 <em>）。內容在功能上完全相同；如果需要逐位元組精確的標記，請用原始碼檢視調整。
我可以從 Word 或 Google Docs 貼上內容嗎？
通常可以。瀏覽器的貼上處理器會把富剪貼簿內容轉換為 HTML。格式在過程中可能被簡化；粘貼後切換到原始碼檢視檢查並清理標記。
輸出的 HTML 可以安全地用在哪裡？
它是純標記，無內聯樣式、無指令碼，對郵件、CMS 內容和文件是安全的。對於公開網頁，若 HTML 會被原樣渲染，建議先做淨化以防範貼上進來的指令碼標籤。
為什麼沒有圖片上傳按鈕？
圖片上傳需要伺服器或 data-URI 處理，而本工具完全離線執行、無後端。你仍然可以在編輯器中貼上圖片或連結，或在原始碼檢視中新增 <img> 標籤。
這個工具會收集我的內容嗎？
不會。一切都在瀏覽器中發生，完全沒有網路請求。你的文本不會離開頁面，斷網也能工作。
輸出可以用在郵件中嗎？
可以。切換到原始碼檢視，複製 HTML，貼上到接受 HTML 的郵件編輯器（大多數都接受）。保持標記簡單：如果客戶端損壞內容，就只保留段落、標題、列表和連結。