若要在網頁標記中線上編輯可見文字，請將 HTML 放入 線上 HTML 編輯器左側窗格，在右側窗格進行選用的 CSS 變更，然後選擇 更新預覽，以受限的本機沙箱算繪結果。
此工作流程適用於 HTML 片段內的文字，例如標題、段落、標籤和替代文字。它不是適用於 Word 文件、任意 .txt 檔案或協作寫作的通用編輯器。支援的輸入為範圍受限的 HTML 和 CSS，輸出則是本機預覽，而非已儲存或發布的頁面。
將文案編輯與文件編輯分開
首先找出需要變更的內容。如果任務是改寫純文字或文字處理檔案中的內容，請使用專為該文件格式設計的編輯器。線上 HTML 編輯器不接受這些檔案。它支援的用途是變更 HTML 標記內的文字或呈現方式，因此適合用於靜態頁面文案、標題、標籤、元件文字和版面實驗。
區分靜態文字與執行階段產生的文字同樣重要。由 JavaScript 插入或從 API 取得的文字無法在此測試，因為指令碼和外部 API 刻意不提供使用。
| 編輯情境 | 變更位置 | 預覽可確認的內容 |
|---|---|---|
| 改寫標題或段落 | 左側編輯器中的 HTML | 算繪後的文字與周圍版面 |
| 重新設定所選文案的樣式 | 右側編輯器中的 CSS | 目前瀏覽器支援的樣式 |
| 變更圖片替代文字 | 左側編輯器中的 HTML | 算繪後標記中的更新屬性 |
| 測試表單標籤 | 左側編輯器中的 HTML | 標籤的呈現方式，但不含表單提交 |
| 顯示由 API 或指令碼產生的文字 | 沒有可用的預覽操作 | 內容仍無法取得，因為指令碼和外部 API 皆已封鎖 |
| 儲存或發布結果 | 目標專案 | 編輯器不會將內容儲存至帳戶或發布 |
一個實用的原則是將文字保留在 HTML 中，並將呈現方式保留在 CSS 中。除非周圍元素的結構也需要變更，否則請予以保留。這樣能讓修訂更容易審查，也能降低破壞標題順序、強調格式或元件版面的機率。
在瀏覽器中編輯文字
- 匯入 HTML。 開啟編輯器，將現有的 HTML 片段貼到左側的純文字編輯器中。HTML 輸入限制為 50,000 個字元，因此如果原始來源較大，請隔離要測試的區段。輸入內容會以標記而非逸出文字的方式算繪，因此片段中的標籤會影響預覽。
- 變更文字而不擾動結構。 找出標題、段落、標籤或屬性，只編輯預定的字元。請保持配對的開頭與結尾標籤完整。如果複製的內容包含應顯示為字元而非標記的 less-than 符號或 greater-than 符號，請在 HTML 中將其編碼為 < 或 >。
- 在外觀重要時新增或修訂 CSS。 請使用右側的選用編輯器設定間距、顏色、對齊或字體排印等樣式。CSS 輸入限制為 30,000 個字元。內嵌樣式仍可使用，但遠端樣式表、字型、圖片、影片、API 和其他外部資源皆已封鎖，因此樣式表應自行包含所有必要內容。
- 選擇更新預覽。 每次更新都會建立全新的文件，並置於不透明來源 origin 的預覽中。編輯器中的 HTML 和 CSS 仍是權威內容。由於預覽不會在你輸入時意外重新算繪，因此請在每批編輯完成後選擇更新預覽。
- 在內容脈絡中檢視文字。 請在預覽中閱讀修訂後的文案，並檢查換行、間距、對齊、強調格式和鄰近標籤。請注意，連結可能可見，但無法使用導覽功能。缺少圖片或字型也可能使你看見的版面與目標頁面不同。
- 沿用測試過的來源。 文字和呈現方式正確後，請將編輯器中的 HTML 和 CSS 作為目標專案的來源。此工具不會將工作儲存至帳戶，因此請將修訂後的來源保留在專案中或你控制的其他位置。
將預覽視為瀏覽器本機測試
預覽會使用全新的 srcdoc 文件建立，並顯示在不透明來源的 iframe 中。兩個編輯器和預覽文件都會留在目前的瀏覽器分頁中。不會有任何內容被上傳、儲存至帳戶或傳送至 API。
由於預覽使用你目前執行作業的瀏覽器，其 CSS 支援也會遵循該瀏覽器。預設表單外觀同樣遵循目前瀏覽器，而非固定的正式環境主題。預覽僅套用小幅的中性 body 邊距和系統字型作為基準，因此請勿將這些預設值視為實際網站的字體排印或間距。
外部資源是預覽與完成頁面不同的常見原因。遠端字型可能會改用其他字型家族，而遠端圖片則可能留下空間，卻沒有預期的圖像內容。允許使用小型且自行包含內容的資料圖片預覽，也支援本機 Blob URL。若要進行可靠的比較，請讓實驗內容自行包含所有必要資源，或在目標專案中考慮缺少的資源。
因應無法使用的瀏覽器行為
預覽 iframe 使用空白沙箱權杖清單，因此通常需要明確權限的功能皆無法使用。MDN iframe 沙箱參考資料說明如何透過沙箱權杖啟用各項功能。嚴格的內容安全政策也會預設拒絕資源，不過仍允許內嵌樣式和本機資料或 Blob 圖片。
| 功能 | 預覽行為 | 對文字編輯測試的影響 |
|---|---|---|
| JavaScript | 不會執行 | 無法顯示由指令碼產生或變更的文字 |
| 表單 | 表單操作與提交已封鎖 | 無法提交或確認輸入的值 |
| 導覽、彈出視窗和下載 | 無法使用 | 無法測試點擊連結、彈出視窗流程和下載 |
| 同源存取 | 無法使用 | 預覽無法檢查或修改周圍的主機頁面 |
| 外部資源和 API | 已封鎖 | 遠端內容、資料、字型和媒體將會缺少 |
| 內嵌樣式和資料或 Blob 圖片 | 允許使用 | 仍可進行小型且自行包含內容的視覺實驗 |
| 基底 URL | 已停用 | 依賴基底 URL 的行為可能有所不同 |
另有兩項保護機制會影響你輸入的來源。插入樣式表前，CSS 結尾樣式序列會先被中和，防止樣式表值突破至新的 HTML 元素中。標記內的第二個內容安全政策無法放寬既有政策，因為瀏覽器政策會彼此結合，而非互相取代。如果需要隔離的 worker 程式碼，請使用獨立的 JavaScript 遊樂場，然後在目標應用程式中測試其整合情況。
在目標情境中驗證編輯
沙箱並不是用於清除你打算發布至其他位置之內容的淨化工具。使用者 HTML 會以標記形式在受限預覽中算繪，但若將相同 HTML 複製到沒有 iframe 沙箱和嚴格政策的實際網站中，就會形成不同的安全風險面。請將最終來源視為目標專案的一部分加以審查，而不是將預覽當成發布安全檢查。
請在內容實際執行的地方驗證無障礙性、語意、反應式行為、SEO 和正式環境內容安全政策。確認修訂後的文字在脈絡中仍有意義、替代文字準確，並使用實際應用程式技術堆疊測試所有動態行為。此編輯器無法取代瀏覽器檢查工具、完整 IDE、建置系統或跨瀏覽器測試套件。
請將僅適用於正式環境的考量排除在預覽實驗之外。外部資產、應用程式指令碼、導覽、表單處理和伺服器行為可能會改變外觀與功能。將修訂後的 HTML 和 CSS 複製到專案後，請使用目標環境本身的建置、伺服器、資產管線和瀏覽器測試流程來確認最終結果。
最後進行文案與標記審查
將編輯內容移入專案前，請進行這項最終審查：
- 將新文字讀成完整的句子，而不只是來源中的個別字詞。
- 確認標題、段落、清單、連結和標籤仍保留合理的語意元素。
- 依修訂後的視覺用途，直接檢查圖片替代文字和其他屬性。
- 在最後一次 HTML 或 CSS 變更後選擇更新預覽，以便檢查目前的來源。
- 確認文案顯示在鄰近內容旁時，換行和間距仍能正常運作。
- 確認 HTML 和 CSS 仍分別在 50,000 個字元和 30,000 個字元的限制內。
- 考慮已封鎖的指令碼、表單、導覽、遠端字型、圖片、API、影片和 iframe。
- 在目標專案中測試無障礙性、反應式設計、SEO、正式環境 CSP 和瀏覽器行為。
此順序能讓編輯工作保持專注：HTML 承載文字，CSS 承載呈現方式，受限預覽顯示目前瀏覽器能算繪的內容，而目標環境測試則能確認發布頁面的實際行為。