在內容管理、編輯中，視覺化編輯器操作直觀，但當內容格式逐步複雜時，樣式錯亂、排版不齊的情況便屢見不鮮。
透過原始碼模式（HTML 編輯模式），編輯者可直接全選、複製、貼上，省去在編輯器上挪來挪去、等按鈕生效的時間。
本文將說明原始碼模式的基本原理、應用場景、範本，幫編輯提升上稿效率！
別再花時間調格式了：這是更快、更乾淨的上稿方式
透過原始碼模式，能避免格式被其他平台（如 Word 或 Google 文件）污染。例如，H2、H3、連結，可直接在MD筆記本中編輯完，再一次貼入，還可讓爬蟲檢查哪裡出錯，不用擔心有肉眼不可見的編輯錯誤。
原始碼模式的三大優勢：
- 只須貼入一次：透過原始碼，編輯可一次貼入整段內容區塊，不須在編輯器中按來按去、移來移去，大幅縮短時間。
- 內容結構更乾淨：相比傳統編輯器，原始碼模式可避免系統自動插入不必要的標籤、內嵌樣式或錯誤間距。
- 後續維護更具彈性：由於原始碼使用的是標準 HTML 結構，其他編輯人員或工程師在接手時，能更快理解、修改內容。
怎麼開啟編輯器的原始碼模式？
大多數 CMS（如 WordPress、CKEditor、TinyMCE 等）都具備原始碼模式，通常可透過「HTML 編輯」、「<>」、「原始碼」或「Source」按鈕切換。
切換後會類似以下：
小編模板：常用的HTML
為了協助廣大的編輯們快速上稿，吐司編提供可重複使用的 HTML 區塊範本。
編輯人員只需修改文字或連結內容，即可快速產出整齊一致的文章版型喲！
標題與段落
<h1>我是文章標題。</h1>
<h2>我是次標題。</h2>
<p>我是一般文字。 <mark>我是畫螢光筆的文字 </mark></p>
<h3>我是小標題。</h3>
<p>我是一般文字。 <strong>我是加粗的文字</strong></p>
圖片與超連結
<img src="圖片網址" alt="圖片說明" width="100%">
<a href="https://example.com" target="_blank" rel="noopener">我是連結。</a>
這個”圖片網址”，還是需要將圖片上傳到網站後台，再從圖片庫中找到網址貼入。吐司編覺得可以直接用編輯器的插入圖片功能就好！
引言
<blockquote>
<p>我是引言。</p>
</blockquote>
我是引言。
進階：RWD表格
傳統表格在手機常造成橫向滑動或炸版。
建議改用「堆疊式 RWD 表格」，在桌機上左右對齊、在手機上自動堆疊，使用者不用滑動就可完整閱讀。
<table style="height: 117px;" border="1" width="148">
<tbody>
<tr>
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<td>數值</td>
<td>數值</td>
<td>數值</td>
</tr>
</tbody>
</table>
若無法加入 <style>，可改用 inline style 或請工程師協助加入。
如果想只知道更多RWD與SEO相關性，可參考：
| 標題1 | 標題2 | 標題3 |
|---|---|---|
| 數值1 | 數值2 | 數值3 |
結語：建立原始碼模板庫吧！
吐司編認為，原始碼編輯並非工程師專屬技能，反而是編輯應該比工程師更熟悉。
透過穩定、可共用的範本庫，搭配基本 HTML 概念，就能大幅提升上稿速度與排版品質，或乾脆直接使用MD模式的編輯軟體寫作，寫完就可以直接貼入！直接省去上稿流程。吐司編自己用的是Obsidian，可參考：
或是直接使用線上編輯器編輯，這是我目前在用的。
關於HTML概念，你可能還想看：