WYSIWYG HTML 編輯器一覽
Mobirise 團隊於 2026 年 10 月整理的編輯器資料。
WYSIWYG 是「what you see is what you get」（所見即所得）的縮寫。在這類編輯器中，您面對的是頁面呈現的樣子，而不是原始碼：點一下標題就能打字，放入圖片或更換顏色，程式會在背後為每個動作寫出對應的 HTML 和 CSS。這讓您不必輸入標籤也能進行 HTML 網頁設計，不過螢幕上看到的只是相近的預覽，並不保證與實際結果完全一致。
傳統設計檢視編輯器、區塊式建構器、視覺化 CSS 設計工具，以及附即時預覽的程式碼編輯器。
視覺化編輯器及其 HTML 匯出功能在 Windows、Mac 或 Linux 上完全免費，並提供 200+ 個區塊供您開始使用。免費方案發布的頁面會附帶 Mobirise 品牌標示。
由 Bootstrap 5 設定樣式的純 .html 頁面，並附帶所需的指令碼。任何能提供一般檔案的主機都可以發布；伺服器端不執行任何程式。
若要閱讀或修改標記本身，需要 Code Editor 擴充功能。它隨 KIT、BASE 和 GROW 方案提供，可針對單一區塊或整個頁面使用。
Mobirise 無法載入在別處製作的網站或範本；Pinegrow、Dreamweaver、Bootstrap Studio 和 CoffeeCup 則可以。
區塊會依手機、平板和桌機自動重新排列，您可以預覽每種寬度。沒有另外獨立的手機版面。
哪一款視覺化 HTML 編輯器適合您的工作
沒有哪一款編輯器是絕對最好的，請依照您要完成的工作來選擇。其中有幾項工作由競爭對手勝出，各卡片中都已註明。
Mobirise
您一邊拖曳區塊、重新輸入文字、調整區塊參數，一邊看到完成後的樣貌；免費應用程式隨後會產生靜態的 Bootstrap 5 網站。缺點：無法載入外部的 HTML，而且要檢視程式碼需要付費方案。
Pinegrow Web Editor
可載入任何現有的 .html 檔案，並在標記旁並排顯示即時的視覺化檢視；同時支援 Tailwind CSS。缺點：每月 US$18、每年 US$149，或一次買斷 US$199。
Bootstrap Studio
拖放式 Bootstrap 元件、內建程式碼編輯器和離線專案，一次性付費 US$29 或 US$59。缺點：您得待在 Bootstrap 的元件模式之內。
Adobe Dreamweaver
Live View 讓您直接點選呈現後的頁面，修改其中的文字、圖片和 class，但仍以原始碼為準。缺點：採訂閱制，單一應用程式方案每月 US$22.99，且沒有 Linux 版本。
CoffeeCup HTML Editor
分割畫面的預覽會隨著您輸入即時重繪頁面；有免費版，完整版一次買斷 US$29。缺點：僅支援 Windows，而且每個標籤都得自己寫。
Webflow
以 CSS 為基礎的視覺化設計工具，每個斷點都需手動設定；匯出程式碼需要付費方案。缺點：面板直接對應 CSS，因此較適合已經熟悉 CSS 的人。
8B AI
輸入一句話就能得到完整的網站設計；免費方案可查看背後真正的 HTML 和 CSS。缺點：它在瀏覽器中運作，而發布上線、完整匯出和透過聊天編輯都需要 Pro 方案（每月 US$9，按年計費）。
Elementor
適用於 WordPress 網站的頁面建構器外掛程式。缺點：不會得到獨立的 HTML 資料夾，因為頁面需要在您的伺服器上執行 WordPress。
提醒：Mobirise 是我們自家的產品，因此請把這份清單視為利害關係人所寫。各競爭對手的資料取自其廠商的產品與價格頁面，若對手在某項工作上做得更好，我們會直接點名。
6 款視覺化 HTML 工具並排比較
這些列是為在意 HTML 本身的人所挑選：您在螢幕上編輯什麼、程式碼有多開放，以及外部檔案能否載入。
| 功能 | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| 您在螢幕上編輯的內容 | 頁面本身：拖入區塊、就地輸入文字、逐一區塊設定 | 呈現後的頁面，旁邊是其原始檔案 | 以程式碼為主；Live View 可在呈現後的頁面上編輯 | 生成的設計，Pro 方案可透過 AI 對話修改 | 放到畫布上的 Bootstrap 元件，並附程式碼面板 | 程式碼，並在分割畫面中即時預覽 |
| 自行撰寫程式碼 | 透過 Code Editor 擴充功能（KIT、BASE、GROW），可針對區塊或頁面 | 可以，並與 VS Code 雙向同步 | 可以，這是主要模式，並提供程式碼提示 | 未列出手動編輯功能；免費方案可查看真正的 HTML 和 CSS | 可以：在仿照 VS Code 設計的編輯器中撰寫 HTML、SASS、JavaScript 和 JSON | 可以；它會自動完成程式碼並檢查您的標記 |
| 載入現有的 .html 網站 | 否，只能開啟在 Mobirise 中建立的專案 | 可以，任何現有網站 | 可以，現有的 Bootstrap 頁面也行 | 廠商未說明 | 可以，把現有的頁面、樣式表、指令碼和圖片拖入專案即可 | 可以，本機檔案或直接在伺服器上開啟的頁面 |
| 匯出的 HTML 所使用的框架 | Bootstrap 5 | Tailwind CSS、Bootstrap，或不使用框架 | 任何框架；內建 Bootstrap 5.3.8、4.4.1 和 3.4.1 | 自有的自訂標記，不使用 Bootstrap | Bootstrap 5、4 或 3 | 您自己的標記；一開始可使用免費的響應式範本 |
| 支援的平台 | Windows、macOS（Apple Silicon 或 Intel 版本）、Debian 系 Linux、瀏覽器、Android | Windows、macOS、Linux；也有瀏覽器版 | Windows 和 macOS | 僅限瀏覽器 | Windows、macOS、Linux | 僅限 Windows |
| 價格與計費方式 | 編輯器及其 HTML 匯出為 US$0。年費方案：KIT 每年 US$149，可解鎖 Code Editor 和付費佈景主題；BASE（每年 US$199）和 GROW（每年 US$249）另提供代管網站與 AI | 每月 US$18、每年 US$149，或一次買斷 US$199；提供免費試用 | 單一應用程式方案每月 US$22.99，需簽年約並按月付款；提供免費試用 | 設計免費；發布所需的 Pro 方案為每月 US$9，按年計費 | 一次付費：Standard 版 US$29，或 Lifetime 版 US$59 | 免費版，或含一年升級的永久授權，US$29 |
「所見即所得」何時不再成立
編輯器只會在您的螢幕上繪製一次頁面，而每位訪客使用的瀏覽器、裝置和字型各不相同。
在多數現代視覺化編輯器中，畫布其實是由瀏覽器引擎繪製的真實網頁，所以您看到的很多內容都是真的：相同的標籤、相同的樣式。差距出現在訪客的環境與您不同的地方，其中三項幾乎人人都會遇到。
字型
只有當頁面從網路載入字型，或隨網站一併提供字型時，訪客才會看到您選用的字型。否則訪客的裝置會改用其他字型，標題的換行位置也會跟著改變。請確認佈景主題有提供所需字型。
螢幕尺寸
畫布一次只顯示一種寬度。在筆電上放得下的標題，到了手機上可能折成好幾行，並排的欄位也可能改成上下堆疊。發布前，請逐一切換預覽的每種寬度。
指令碼
輪播圖、選單、表單、地圖和內嵌影片在編輯器中的行為常常不同，或被刻意暫停。請把它們在編輯器中的樣子視為替代示意，並在真實瀏覽器中測試匯出的頁面，再從正式上線的主機送出一份測試表單。
WYSIWYG HTML 編輯器的四大類型
它們都會在您作業時顯示頁面，差別在於您操作的對象：頁面本身、現成區塊、CSS 屬性，或是程式碼。
傳統設計檢視
在 HTML 之上提供類似文件的畫布，通常與程式碼並排；Dreamweaver 的 Live View 就是它現今的形式。適合維護手寫網站、想修改文字又不想在標籤裡翻找的人。
區塊式建構器
頁面由完成的區段或元件組成，Mobirise 和 Bootstrap Studio 就是如此，標記則由程式撰寫。許多人把這類工具稱為 HTML 網頁建構器。適合想不寫程式碼就做出網站的人；許多適合新手的簡易網頁建構器也採用這種方式。
視覺化 CSS 設計工具
Webflow，或用於您自己檔案的 Pinegrow：您在對應 CSS 屬性的面板中為元素設定樣式。適合已習慣用方框、class 和斷點思考的設計師。
附即時預覽的程式碼編輯器
CoffeeCup HTML Editor 這類工具，常被列為附預覽的 WYSIWYG HTML 編輯器：您輸入 HTML，旁邊的窗格就會重繪頁面。適合學習 HTML 的人，以及每個標籤都自己寫、卻想立刻看到效果的開發者。
您要打造的是自己的應用程式，而不是網站？那麼您需要的編輯器其實是一個元件：嵌入表單、CMS 或客服系統的富文字方塊，讓您的使用者可以設定文字格式。TinyMCE 和 CKEditor 5 是功能完整的老牌選手，提供付費雲端方案和附加元件；Quill 是較輕量的開源 WYSIWYG HTML 編輯器；TipTap 是建立在 ProseMirror 上的無介面（headless）工具包，因此工具列要由您自己設計。它們輸出的是您產品內部的 HTML 片段，而不是整個頁面，所以未列入上方的比較表。
在 Mobirise 中以視覺方式設定的內容，以及需要程式碼的部分
頁面的大部分內容靠點選和拖曳就能完成。Code Editor 擴充功能則補足面板沒有涵蓋的部分。
區塊
編輯器中的每個頁面都是由預先做好的區段排成的一欄。從側邊面板拉進新的區塊，不需要的就刪除。
文字與標題標籤
直接在頁面上輸入。每個標題都可以選用您指定的 H 標籤，所以頁面大綱由您決定。
照片
點選任何一張照片，就能換成您自己的。加入大檔案前請先縮小尺寸；原因請見下方的小技巧。
區塊參數
每個區塊的參數面板可設定其間距、背景、可見的部分（如標題或按鈕）以及欄數。
字型與顏色
在 Style Editor 中選擇區塊使用的字型和色彩配置。
需要時使用程式碼
額外的屬性、自訂的 CSS 規則或改寫過的標記，都透過 Code Editor 擴充功能處理，KIT、BASE 和 GROW 皆已包含。
要知道的限制：您排版出的 HTML，就是每台裝置收到的 HTML。Mobirise 沒有僅限手機的版面，也無法只在某一種螢幕尺寸下隱藏元素。
匯出後得到的檔案
從桌面應用程式匯出，任何方案都免費。改在瀏覽器中製作的話，下載程式碼則需要 BASE 或 GROW。
頁面與圖片
每個頁面對應一個 HTML 檔案，內含一般的標題、段落和連結，匯出的資料夾中另附您的照片和佈景主題的圖形。
樣式與指令碼
Bootstrap 5 的 CSS 和 JavaScript、佈景主題自己的樣式、您在面板中做的選擇，以及選單和輪播圖背後的指令碼。
伺服器端不需要任何程式
沒有 PHP、沒有資料庫、沒有管理後台，因此網站可在任何一般網站主機或 GitHub Pages 上執行。
匯出是單向的。Mobirise 是從自己的專案來建置，而不是從 HTML 建置，所以您在其他編輯器中對匯出檔案所做的修改，不會回到專案裡。請在 Code Editor 中修改程式碼，或把手動修改當作最後一步。
如何讓以視覺方式製作的 HTML 保持精簡又快速
視覺化工具在設計上會多出一些份量。這些習慣能讓它維持輕巧，無論使用 Mobirise 或其他編輯器。
以標題建立大綱，而非看大小
每個頁面只放一個 H1，其下依序巢狀放置 H2 和 H3，並依照標籤在大綱中的層級來選擇。至於看起來多大，則屬於樣式的工作。
先縮小照片
把每張圖片調整成約為它最寬顯示時的尺寸，並存成 WebP 或壓縮良好的 JPEG。一張相機原檔就可能比整個頁面的其他部分都重。
在同一個地方設定樣式
逐一替按鈕改樣式，會留下一堆零散的規則。請在 Style Editor 或您所用工具的對應功能中集中設定字型和顏色，CSS 就能保持簡短。
在編輯器之外測試
用多個瀏覽器開啟匯出的頁面，執行 W3C 驗證器以及 PageSpeed Insights 這類速度測試，並在上線前修正它們標出的問題。
Mobirise 佈景主題，還是免費的 HTML 網站範本？
兩者都能讓您第一天就有完成的外觀。差別在於由誰撰寫標記，以及之後哪些編輯器可以載入。
下載的範本
一個由別人寫好的檔案資料夾。可用程式碼編輯器，或能開啟外部 HTML 的視覺化工具來編輯，例如 Pinegrow、Dreamweaver、Bootstrap Studio 或 CoffeeCup。請閱讀授權條款：有些免費範本要求附上署名連結。
Mobirise 佈景主題
存在於應用程式內的區塊庫，而不是一個檔案資料夾。您以視覺方式用它組合頁面，再由匯出產生 HTML。免費使用者可在單一基本佈景主題中使用 200+ 個區塊；KIT 解鎖全部付費佈景主題與擴充功能，合計超過 220 項。
把範本的外觀搬過來
Mobirise 無法開啟別處製作的範本，即使它是以 Bootstrap 5 建置的也一樣。您可以用區塊重建外觀，或在範本授權允許的情況下，把螢幕截圖當作提示詞交給 Mobirise AI，再編輯它回傳的 4 種設計方案。
哪些人適合用 Mobirise 來視覺化編輯 HTML
Mobirise 適合某些工作，也不適合另一些工作。以下幫您判斷您的情況屬於哪一邊。
適合的情況
- 您想以視覺方式排版頁面，完全不用輸入標籤
- 您需要可放到自己主機上的純檔案，又不想為此付費購買方案
- 您用一致、響應式的區塊來製作客戶網站
- 您在筆電上離線工作，之後再發布
- 您想先取得 AI 草稿，再在同一個編輯器中手動調整
這些情況下，其他工具更合適
- 您的工作是修復老舊的手寫網站或下載的範本：Dreamweaver、Pinegrow 或 CoffeeCup HTML Editor
- 您的專案需要 Tailwind，或完全不使用框架：Pinegrow
- 您想要像素等級的控制和逐斷點設定樣式：Webflow
- 您寧可為 Bootstrap 開發一次付清：Bootstrap Studio
- 您想免費撰寫並預覽程式碼：CoffeeCup 的免費版
- 網站已經在 WordPress 上運作：Elementor
關於視覺化 HTML 編輯的常見問題
什麼是 WYSIWYG HTML 編輯器？
一種讓您依頁面在螢幕上的樣子來修改網頁，同時由程式撰寫 HTML 和 CSS 的編輯器。這個縮寫暗示您編輯的頁面就是您發布的頁面。實際上兩者很接近，但並不相同，因為字型、螢幕寬度和指令碼都取決於每位訪客的瀏覽器。
Mobirise 是拖放式 HTML 編輯器嗎？
是的，以區塊為單位：您從側邊面板把完成的區段拖到頁面上，再在其中輸入文字。您不能把單一元素放在任意位置；版面來自區塊及其參數。想進一步了解這種工作方式：免費拖放網站建構器。
我可以在 Mobirise 中編輯 HTML 程式碼嗎？
可以，只要有 Code Editor 擴充功能；它隨 KIT（每年 US$149）、BASE 和 GROW 提供，能顯示單一區塊或整個頁面的標記和 CSS。免費方案匯出的檔案也能用任何文字編輯器開啟，但在那裡的修改不會回到專案中。
Mobirise 能開啟我下載的 HTML 範本嗎？
不能。市集上的範本或手寫網站都是純 HTML，而 Mobirise 只處理在它內部建立的專案。Dreamweaver、Pinegrow、Bootstrap Studio 和 CoffeeCup HTML Editor 都能載入現有的 HTML；在 Mobirise 中，您需要用區塊重新建立外觀。
有免費的 WYSIWYG HTML 編輯器嗎？
有。Mobirise 桌面應用程式可免費用於個人或商業網站，匯出功能也一樣免費，不過免費網站會顯示 Mobirise 品牌標示。如果您比較想自己寫程式碼，CoffeeCup 的 HTML Editor 有免費版。8B AI 可免費生成設計，但發布需要付費。更多免費選項，請見我們整理的免費網站架設軟體清單。
視覺化編輯器產生的 HTML 比手寫程式碼差嗎？
通常會比較重，因為視覺化工具會加上手寫頁面不會有的外層容器和 class。建立在 Bootstrap 5 這類框架上的輸出，則依然易讀且可預期；關於框架方面，請見 Bootstrap 網站建構器。若要得到最精簡的標記，請自己在程式碼編輯器中撰寫。
有適用於 Mac、Windows 或 Linux 的離線 WYSIWYG HTML 編輯器嗎？
有。Mobirise 桌面應用程式提供 Windows、macOS（Apple Silicon 和 Intel）以及 Ubuntu 與其他 Debian 系 Linux 系統的版本，編輯時不需要網路連線。專案可離線保存的 Bootstrap Studio 以及 Pinegrow 也能在這三種系統上執行，而 Dreamweaver 沒有 Linux 版本，CoffeeCup HTML Editor 則只能在 Windows 上執行。Mac 使用者可在我們的 Mac 架站軟體指南中找到更多選擇。
Mobirise 可以離線使用嗎？
桌面應用程式可以：視覺化編輯、預覽，以及您已安裝的任何佈景主題或區塊，在沒有網路時都能繼續使用。AI、發布、登入、購買，以及取得更新或您尚未擁有的佈景主題，則需要連線。進一步說明這種區別：離線網站軟體。
有適用於 Android 或 iPhone 的線上 WYSIWYG HTML 編輯器嗎？
Mobirise 沒有適用於 Apple 裝置的應用程式，但在 iPhone 和 iPad 上，可以在 Safari 或其他行動瀏覽器中線上使用其網頁版。在 Android 上，從 Google Play 安裝的 Mobirise AI 應用程式可以生成設計、翻譯、發布並匯出 HTML。8B AI 同樣在瀏覽器中運作。