開源線上圖形化網頁編輯神器 GrapesJS

如果你經歷過開發網站、前端設計、網頁製作，或者是編排過 EDM，那麼你一定會和我有相同的感受：

• 市面上沒有任何一套免費、簡單又功能強大的線上圖形化網頁編輯器。
• 如果有，那些一定都是建站平台或是發報系統的設計工具，全部都是要錢的，而且還不給你下載 Source Code。
• 專業的前端神器 Bootstrap Studio 和 Blocs 雖然功能很強大，但要下載安裝，軟體還要花錢買，而且有一定的學習門檻。
• 開源的 IDE（Integrated Development Environment）雖然免費，例如 VSCode、Nuclide、Atom，但這些工具沒有圖形化介面，學習門檻更高。
• Dreamweaver 被 Adobe 改得非常難用。

圖形化網頁編輯器適合做什麼？

擁有圖形化界面的網頁編輯器，到底適合做些什麼呢？這邊提一下圖形化網頁編輯器能滿足的任務好了。

由於這一類型的編輯器為了降低使用門檻，通常提供了許多現成的模板和簡單直覺的設計工具，使用者可以根據自己的需求和喜好，選擇適合的模板和風格進行自定義。可以輕鬆地調整網頁的布局、顏色、字體、圖片等元素，以滿足自己的品牌形象和設計要求。

這些編輯器通常也支援拖放式編輯功能，可以輕鬆地將各種元素拖放到網頁上，並進行排版布局。這讓設計者可以快速地建立複雜的網頁結構，並輕鬆地調整和修改網頁的外觀和功能。

以下列出幾種常會需要圖形化網頁編輯器的工作：

婚禮活動頁面製作

有些新人會製作專屬的婚禮活動網頁來替代發喜帖，其中包括婚禮日程安排、地點信息、賓客名單、相冊分享、禮金收取等功能。這個網頁可以是一個訊息中心，方便賓客了解婚禮的詳細信息。

而且網頁也可以透過社群軟體、訊息工具來傳輸，更適合現代人使用。

生日派對活動頁面製作

有一些親朋好友在不同國家、時區的人，為了方便大家一起慶祝生日，就可以為壽星製作一個專屬的生日派對網頁，上面可以包括派對日期、地點、主題、邀請函、RSVP 表單等。這樣的網頁可以讓朋友快速了解派對的詳情，並確認是否參加。

最棒的是，如果派對結束了，也能把影片、照片上傳上去，讓當下無法參加的人，也能事後的觀看這些回憶來增加參與感。

節日特賣活動頁面製作

每一個行銷人員都希望在遇到特殊節日季節時，能製作一個節日活動網頁，上面可以包括節日慶祝活動安排、特別優惠、禮品推薦等。這樣的網頁可以吸引更多的顧客參與節日慶祝活動。

但並非每一個人都有資源、能力，可以獨立製作活動網頁，而圖形化編輯器就能幫上這個忙。

聚會活動頁面製作

朋友或同事聚會時，可以製作一個聚會活動網頁，上面包括聚會日期、地點、主題、活動安排、菜單、報名表等。這樣的網頁可以讓參加者更好地準備和計劃活動。

慈善活動頁面製作

有時候，為了籌集資金和宣傳慈善活動，發起者也可以製作一個慈善活動網頁，上面包括活動目的、日期、地點、捐款方式、贊助商名單等。這樣的網頁可以吸引更多人關注和參與慈善活動。

一頁式網站行銷

你應該看過臉書出現過很多的「一頁式網站」吧？

選擇一個合適的模板或主題，這些模板通常已經預先設計好了各種元素和結構，設計者只需根據自己的需求進行自定義即可。

在編輯過程中，你可以通過拖放式介面輕鬆地添加文本字框、圖片、視頻、按鈕等元素到網頁上，並進行排版和布局。過程中你還可以自由調整各個元素的大小、位置、顏色等屬性，以創建出個性化和吸引人的設計。此外，圖形化網頁編輯器通常也提供了各種特效和動畫效果，你可以使用這些效果來提升網站的視覺吸引力。

一頁式網站行銷通常注重簡潔明瞭的設計和內容呈現，因此我們可以通過圖形化網頁編輯器輕鬆實現這一目標。可以將重要的訊息和內容放置在網頁的中心位置，並使用清晰的標題、說明文字和圖片來吸引訪客的注意力。同時，還可以添加呼籲行動的按鈕或表單，以促使訪客進行互動和行動。

EDM 製作

EDM 製作這個就更不用講了，許多公司每個月都要發上百萬封的行銷 EDM，用來作商品促銷、新品告知、活動推廣等，所以製作 EDM 絕對是 EC 的重點行銷。

與傳統郵寄相比，發送電子郵件成本較低，因為無需印刷和郵寄成本。這使得它成為一種成本效益高的行銷方式。

而電子郵件可以在幾秒鐘內發送到收件人的收件箱，實現即時的傳達和反饋。這有助於及時傳遞重要信息，例如促銷活動或限時優惠。並且，通過電子郵件行銷平台，可以根據收件人的興趣、行為和偏好，以及其過去的互動歷史，對郵件進行個性化定制。這提高了郵件的相應率和轉換率。

電子郵件行銷允許你將郵件發送給特定的目標受眾，這樣你就可以確保你的郵件只發送給真正感興趣的人群。通過電子郵件行銷平台，你還可以追蹤和分析你的郵件活動，包括開封率、點擊率、轉換率等。這些數據可以幫助你了解收件人的行為和偏好，從而優化你的行銷策略。

網站前端（Front-end development）開發

網站前端開發是指開發與使用者直接互動的網頁部分，主要包括網站的外觀、布局、功能和效果等。

前端開發通常要定義網頁的結構和內容，用 CSS 控制設計網頁的外觀和風格，用 JavaScript 於網頁實現動態效果和交互功能，如動畫、過渡效果、彈出窗口等。

由於需要確保網站在各種設備和螢幕尺寸下都能良好地顯示和適應，所以要使用 RWD 的方式來開發網頁，以提供良好的使用者體驗。並優化網站的性能，包括加載速度、響應時間、相容性等，提供良好的使用者體驗。

通常前端開發還會需要測試和調試網站的前端程式碼，確保網站的功能正常執行與設計一致。

圖形化編輯器的最大特色

圖形化的編輯器有一個很有趣的簡稱（WYSWYG，What You See Is What You Get），意思就是中文的「所見即所得」，也就是說你可以看到你自己正在編輯的版面、即將成形的樣子。

中國大陸那邊對於這類型的編輯器也有另一種稱呼，他們稱作「低代碼編輯器通用框架」，我認為這名稱更符合其功能性。

從 2000 年 Web 崛起之後，大量的網站製作需求出現，一開始都是直接編寫原始碼，但是那樣的效率實在很差。

後來開始出現平易近人的圖形化編輯器，那個年代除了知名的 Micromedia Dreamweaver 之外，也出現過不少各種奇妙的編輯器，知名的包含 Adobe GoLive、Microsoft FrontPage、Microsoft Expression Web……。

Microsoft Expression Web 4 是該軟體的最後一個版本，微軟將計劃於 2012 年發布停止更新。

後來的 Dreamwarver 被 Adobe 收購後，原本易用強大的特性，被 Adobe 的工程師改到蕩然無存。😮‍💨

當年連 Apple 也曾經發表過一個叫 iWeb 的軟體，讓 Mac 用戶可以透過簡單的圖形介面完成各種網頁需求。

不過這些軟體在當時的技術上都有缺陷，而且後來 Web 2.0 開始提倡 RWD（Responsive Web Design）設計，而這些軟體都沒有辦法做出 RWD 的網頁，於是紛紛走入歷史。

當然現在還是有許多廠商持續在這一塊開發，但由於 HTML 和 JS日漸強大，現在是除了較專業的編輯器之外，許多利用 Web 來建構 APP 的服務平台也如雨後春筍般的冒出來，低門檻就是這種 TA 最大的需求。

功能簡易用的特性，讓許多有 Web 製作需求的人，都會優先的選擇這種方式來製作。

便捷性的使用方式

圖形化編輯器具有許多便捷性和使用方式，讓用戶能夠輕鬆地建立和管理自己的網站，無需專業的程式基礎或設計技能，以下是其便捷特性：

• 友好的操作界面： 圖形化編輯器通常擁有直覺、易於使用的界面，你可以透過拖放、點擊等方式輕鬆地加入、編輯和調整網站的各種元素和內容，例如文字區塊、圖片、影音、表格等。
• 提供豐富的模板和設計工具： 這些平台通常提供了大量的現成模板和設計工具，可以根據自己的需求和風格選擇適合的模板，並進行自定義和修改，以打造獨一無二的網站。
• 無需程式基礎： 使用者不需要具備程式或設計技能，即可輕鬆建立和管理網站。這些平台通常提供了許多預先設計好的功能和模組，只需透過簡單的操作即可增加和配置這些功能，例如表單、導航選單、社群媒體集成等。
• 即時預覽和編輯： 使用者可以在編輯界面上即時查看對網站所做的更改，並實時預覽網站的外觀和效果。這使得用戶可以隨時隨地進行調整和修改，並即時查看效果。
• 內建網站分析和 SEO 工具： 這些平台通常內建了網站分析和 SEO 優化工具，可以輕鬆地了解網站的流量、訪問者等信息，並進行相應的優化操作，提升網站的可見性和效果。

自由度和彈性

圖形化編輯器的自由度和彈性是其最大特色，下面這邊列出其特點：

• 拖放式設計：圖形化編輯器通常採用拖放式的操作方式，可以輕鬆地將各種元素（如文字框、圖片、影音、按鈕……等）直接拖到想放置的位置上，並自由調整它們的位置、大小和外觀。
• 即時預覽：這類編輯器通常提供即時預覽功能，可以在編輯器中對網頁進行設計和修改，並立即看到其在不同設備上的實際效果，這有助於設計者實時調整和優化設計。
• 豐富的模板和元素庫：圖形化編輯器通常提供豐富的模板和元素庫，可以從中選擇適合自己需求的預設模板或元素，並根據自己的喜好和品牌風格進行自定義和修改。
• 自定義性：儘管圖形化編輯器提供了許多預設的模板和元素，但使用者仍然可以根據自己的需要進行自定義和修改，例如調整顏色、字體、樣式等，或者加入自定義的原始碼和功能。

幾乎沒有學習門檻

由於簡易的圖形化編輯器，其特性就是讓你自己摸索，所以整體操作介面異常的簡單，任何沒有經驗的人僅需要花上 30-60 分鐘，就能自己學習上手，完全不需要有人手把手的教學。

不過，如果是專業的編輯器，可能還是需要深度學習，所以如果只是做做活動頁面（Landing Page）或是電子報（EDM），應該不太需要專業的編輯器。

一些較知名的圖形化編輯器應用程式

雖然前面提到，許多線上編輯平台都綑綁網頁空間，所以如果你能自己動手處理 Web server，hosting、DNS……你都有能力自己架設修改，或是你自己有購買線上的虛擬主機。那麼，你可以用這種較專業的前端開發工具。

Bootstrap Studio

https://bootstrapstudio.io/

Bootstrap Studio 是一個專業的網頁設計工具，能讓設計師輕鬆地設計和開發具有現代化外觀和視覺效果的網頁。它提供了直覺的使用者界面和豐富的功能，使得設計師和開發者可以快速地創造出高水準的網站原型或是網站前端設計。

Bootstrap Studio 使用拖放方式在網頁上直接加入各種元素，如文字框、按鈕、圖片、表格等，並且支援直接預覽和即時編輯，只要觀看者和設計者的電腦在同一個網段下，用手機可以即時的查看設計效果，就像在看真實的網站一樣。

Bootstrap Studio 讓設計網站不用從零開始，它提供了豐富的模板和組件庫，你可以直接使用這些預先設計好的頁面模板來套用，加速網頁開發流程。

至於收費方式，Bootstrap Studio 提供了 Standard 和 Lifetime 兩種版本（都是買斷制），而且帳號可以給 Windows 和 Mac 安裝。（官方的說明頁面裡面也沒有限制一個授權可以裝幾台電腦）

Standard 版本要價 29 美元，提供一年了的虛擬主機和一年內無限次升級，這對於大多數的開發者來說已經非常充足。

Lifetime 版本則要價 59 美元，提供了終生的虛擬主機和永久無限次數的軟體升級，如果是重度使用者、前端工程師，會非常推薦這個方案。

Bootstrap Studio 是我電腦中常駐的應用程式，要開發前端、網頁、EDM，用它來說簡直是小菜一碟，該工具也是知名套件 Bootstrap 公司自己的產品（如果你有聽過鼎鼎大名的 Bootstrap 套件的話）。

Blocs

https://blocsapp.com/

Blocs 的創作者是一對英國夫婦，對你沒看錯，這是一個僅靠兩個人就開發出來的超級工具，他們是 Norm Sheeran 和 Tina Xie。他們共同開發了這款軟體，並且積極地支援和更新著它，使其成為了一款受歡迎的網站建立工具。這對夫婦有著豐富的設計和開發經驗，他們希望通過 Blocs 讓更多的人能夠輕鬆地建立出精美的網站，而不需要深入學習程式知識。

Blocs 和 Bootstrap Studio 是競爭對手，但是 Bootstrap Studio 比 Blocs 更早問世。

Bootstrap Studio 於 2015 年首次發布，而 Blocs 則於 2016 年推出。Bootstrap Studio 是一款專注於使用 Bootstrap 框架建立網站的工具，而 Blocs 則是一款更為全面的網站建立工具，不僅支援 Bootstrap，還提供了更多的自定義和設計功能。

如果你用這兩個軟體，你就會發現，兩個軟體的理念非常接近，Bootstrap Studio 更嚴謹且不容易出錯。而 Blocs 則是更加自由、更加的天馬行空。

Blocs 是 Mac only 的應用程式，如果你的電腦是 Mac 的話請務必試試這個開發前端的超級神器。

Sparkle

https://sparkleapp.com/

Sparkle 相較於上面兩個工具，它更視化、更隨意一些，用簡單的 UI 就能輕鬆地作出現代化、RWD 的網站，而且是多采多姿的網站設計，無需編碼或複雜的設計技能。

Sparkle 的使用者友善是其一大特點，你可以透過拖放方式輕鬆加入文字區塊、圖片、影片、圖形等內容元素，並進行排版和設計。還提供了各種預設的設計元素和效果，設計者可以根據自己的需求輕鬆地定製和應用。

Sparkle 除了有簡體中文介面之外，它還導入了 AI，由 AI 來幫你產生網站模板。

僅需要填入網站的目的，然後給一個主題，AI 會產生許多分頁的主題，你只需要選擇要產生的頁面內容即可，可謂是「用嘴把產生前端」。

下面這張圖便是我用 AI 產生的五個頁面。

我給的主題是「線上課程活動」，然後細節填入「理財學習線上課程」，並依照軟體給予的建議選了五個分頁，產出的時間差不多是 3 分鐘。

Sparkle 的 AI 能產生網頁確實令人印象深刻。只是網頁、EDM，都是經過企劃、編輯、設計多方的長時間討論，可以說是集眾人的意見下所產生的結果，它可能不是最好看、最富美感、最能吸引眼球的設計，但它是大家最後妥協的結果。

看來目前要用 AI 產出能讓多方排板定案的設計，現階段還有許多困難。

Dreamweaver

所有的應用程式我最不想用的就是 Dreamweaver（最爛的我也覺得是它），原因很簡單，Dreamweaver 在純文字編輯器工具的開發功能、套件、邏輯……都是最差的，而它原本保有那一點點的圖形界面也被 Adobe 改得難用無比，簡單來說這是一套沒有人喜歡的工具。而且它還是綑綁在 Adobe CC 裡面的一套昂貴的編輯工具。

Dreamweaver 雖然號稱有圖形介面，但經過Adobe 的巧手與策略，能所見即所得的功能僅剩不多，不過還能即時預覽，但如果只是要即時預覽，用 Dreamweaver 還不如直接用 VSCode，VSCode 上面也有一個 Live Preview 的 Extension 可以讓你預覽畫面，和 Dreamweaver 的預覽有著差不多的檢視效果。

嗯！我一點都不想花時間評論這個軟體，Pass！😤

線上網頁編輯平台

假如你沒有能力處理線上空間、虛擬主機……我想你比較適合用「線上網頁編輯平台」。

就像我們開頭提到的，目前主流的線上圖形化網頁編輯器，幾乎都和空間業者綑綁，好處是你只要付錢，大多數的功能你都可以使用，不用花時間調校和生意、設計以外的事情。

壞處就是所有的內容都放在對方的服務裡面，假設有一天想換個平台，你的資料也別想帶走，要換平台就要重新再來。

以下介紹三家最多人用的「線上網頁編輯平台」。

Wix

https://zh.wix.com/

Wix 是一個網頁製作平台，用戶可以輕鬆建立和管理自己的網站，無需具備專業的網頁設計和程式知識。它提供了豐富的模板和工具，用戶可以根據自己的需求和喜好自由設計的網站、網頁。

Wix 的用途非常廣泛，適用於個人、企業、組織等各種不同類型的網站建設項目。用戶可以利用 Wix 建立個人網站、企業網站、電子商務網站、部落格、活動網站、一頁式網站……等各種不同風格、功能的網站。

Wix 具有良好的便利性，用戶無需具備專業的網頁設計和開發知識，直覺的拖放式編輯界面就能快速的建立自己的網站。平台提供了豐富的模板和設計元素，用戶可以輕鬆地自訂網站的外觀和功能，實現個性化的設計效果。

Wix 的免費版可以做基本的網站建設功能，但沒有自訂網域，頻寬也有限制，網頁還帶有 Wix 廣告彈出，基本上。

付費版最便宜的方案一年要價 2400 元（台幣），提供更多的功能和更高的自定義能力，用戶可以根據自己的需求選擇不同的付費方案，包括月費和年費兩種支付方式。付費版還提供了更多的優惠和特色服務，如自定義域名、廣告移除、專業設計支援等。

如果不想把資源和心思花在主機、SEO……這些地方，花錢解決反而是最快的途徑。

Squarespace

https://www.squarespace.com/

Squarespace 是一個網頁建置平台，提供用戶快速建立和設計專業風格的網站和網上商店的解決方案。它的用途非常廣泛，適用於個人、企業和創作者等不同類型的需求。

使用 Squarespace，使用者無需擁有專業的程式背景或設計技能，即可輕鬆建立自己的網站。平台提供了豐富的模板和設計工具，使用者可以根據自己的需求和喜好進行自定義設計，建立出獨具個性和專業水準的網站。

Squarespace 的界面非常直覺和易於使用，使用者可以輕鬆地增加、編輯和管理網站上的內容，包括文字、圖片、視頻等各種元素。此外，平台還提供了強大的網站分析和管理工具，使用者可以隨時監控網站的流量和表現，並進行必要的調整和優化。

關於收費方式，Squarespace 採用訂閱制模式，付費的使用者可以根據自己的需求選擇不同的方案，每個方案都有不同的功能和價格。使用者可以根據自己的預算和需求選擇適合自己的方案，並隨時根據需要進行升級或降級。整體來說，Squarespace 是一個功能豐富、易於使用和靈活適應不同需求的網頁建置平台，適用於各種不同類型的用戶和項目。

Squarespace 除了讓你自己設計網站之外，也導入了一個叫「Blueprint AI」，用 AI 來幫你設計網站。

Squarespace 最近的大新聞就是買下 Google Domain 的所有客戶，取代 Google Domain 成為域名註冊商，我手上有好幾個域名都是在 Google 註冊的，也都陸續的被轉移到 Squarespace 上，目前用起來問題不大，而且 .com 一年只要 400 元不到。

Squarespace 當初成立時，主要的服務對象就是中小企業，而近年來個人品牌流行，也很適合「服務類型的工作者」，只要你是提供諮詢服務、自媒體工作者、身心靈服務、自由接案者、餐廳等，都很適合使用 Squarespace 來架設網站的。

有很多人會拿 Wordpress 和 Squarespace 比較，不過 Wordpress 比較偏向內容經營，如果你是設計相關的工作人員，想到作出美美的網站，就很適合 Squarespace，因為有許多內建功能展示作品集，讓潛在客戶認識你的設計風格與過往的作品。

Weebly

https://www.weebly.com/?lang=zh_TW

Weebly 是一個網頁建立平台，使用它可以輕鬆地建立和管理自己的網站，無需具備專業的程式或設計技能。Weebly 提供的簡單、直覺的界面來讓你建立各種類型的網站，包括：個人網站、企業網站、部落格、網上商店等。

Weebly 提供了許多易於使用的模板和設計工具，使用者可以輕鬆地自定義網站的外觀和風格，以滿足自己的需求和品牌形象。支援拖放式編輯功能，可以輕鬆地增加文字、圖片、影音、表格等內容到自己的網站中，並進行排版和布局。

Weebly 提供了許多實用的功能和工具，例如網站分析、SEO 優化、社交媒體集成、電子商務功能等，幫助用戶提升網站的可見性和效果。此外，Weebly 還提供了許多擴充應用和第三方集成，您可以根據自己的需求進行擴展和定製。

關於收費方式，Weebly 提供了多種不同的方案和價格選擇，用戶可以根據自己的需求和預算選擇適合的方案。付費則可以享受更多的高級功能和服務，例如自定義域名、無廣告顯示、更大的存儲空間、更多的設計工具等。

線上開源網頁編輯平台

這個類型的編輯器是我這次趨勢想推薦的重點，我一直覺得開源的環境比較適合較小的公司來用，而且公司內部有自己的 IT 部門，或多或少都能接觸一些技術。

另外就是，因為小型公司相對於其他產業，預算可能較不足，難以購買龐大的商業軟體。所以用開源小軟體來創造大利潤，這樣才符合小公司的定位。

GrapesJS

https://grapesjs.com/

GrapesJS 是一款開源的視覺化網頁建立工具，它提供了一個簡單易用的界面，讓使用者可以在不需要寫程式碼的情況下創建複雜的網頁。它採用了現代的 JavaScript 框架和函式庫，以確保在提供強大功能的同時，也能保持高效和易用。因為易於使用且具有高度自定義性的網頁建立工具，適合各種不同需求的使用者。

透過 GrapesJS，使用者可以快速拖放內建的各種元件，如圖片、文字、按鈕和影片等，輕鬆組裝出多樣化的頁面。同時，GrapesJS 還支援使用插件來擴展其功能，以滿足不同的需求。

此外，GrapesJS 具備強大的設計工具，使用者可以輕鬆調整元素的位置、大小和顏色，並且可以使用預設的樣式或自定義樣式來打造獨特的頁面外觀。

相對於其他類似的工具，GrapesJS 有著明顯的優勢：

• 視覺化操作：GrapesJS 提供直覺的拖放操作界面，讓使用者可以輕鬆地建立網頁，無需編寫複雜的程式碼。
• 可擴充性：GrapesJS 支援使用插件來擴展其功能，使用者可以根據自己的需求自由地擴展和定制。
• 高效率：GrapesJS 採用現代的 JavaScript 框架和函式庫，如 React 和 Redux，以確保優異的性能和易用性。
• 強大的設計工具：GrapesJS 具備豐富的設計工具，使用者可以輕鬆設計出符合自己需求的網頁。
• 開源：GrapesJS 是一個開源項目，使用者可以免費使用並貢獻程式碼，共同推動專案的發展和提升品質。

vvvebjs

https://www.vvveb.com/vvvebjs/editor.html

vvvebjs 是一個在 jQuery 的開源基礎架構所打造的網頁編輯器，它提供了一個簡單的使用者界面，讓設計者可以輕鬆地設計和編輯網頁，完全免費使用。這個編輯器可以讓開發人員和設計師們快速地創造出具有吸引力和互動性的 RWD 網頁，而無需具備深入的程式知識。

vvvebjs 具有豐富的元素庫，包含了各種常用的 HTML 元素和 Bootstrap 組件，使用者可以通過拖放的方式輕鬆地將它們加入到網頁中，並進行自定義設置。同時，它還提供了預覽功能，使用者可以隨時查看編輯的效果，以便及時調整和修改。

這個編輯器即使是沒有編程經驗的使用者，也可以快速上手，創造出專業水準的網頁設計。它的界面設計直覺，功能操作簡單明了，讓使用者可以輕鬆地進行各種操作，如加入元素、設置樣式、編輯內容等。

craft.js

https://craft.js.org/

Craft.js 同樣是一個強大且靈活的 JavaScript 框架，用於構建和編輯網頁應用中的可視化編輯器。它的主要用途是讓開發者和設計師輕鬆創建直覺的網頁編輯界面，允許開發者在前端即時編輯和構建內容。

Craft.js 提供了簡潔而強大的 API，使得開發者能夠定義自訂的編輯器元件和行為，從而打造出符合特定需求的編輯器。這種靈活性讓它在構建 CMS（內容管理系統）、頁面構建器和其他需要使用者交互的應用中尤為便利。

在便利性方面，Craft.js 注重使用者體驗，提供了一個直觀的拖放界面，讓使用者可以輕鬆地操作和配置網頁元素。它還支持熱更新和實時預覽，使得開發和測試過程更加順暢，從而加快開發速度。

Craft.js 的收費方式通常是開源的，這意味著它可以免費使用。然而，某些擴充功能或企業級支援可能需要付費訂閱或授權，以獲得更全面的技術支援和高級功能。

整體來說，Craft.js 其靈活性、便利性和免費開源的特點，絕對會成為開發者和設計師在創建互動性網頁應用時的強大工具。

本次介紹的 GrapesJS 是個什麼樣的軟體？

GrapesJS 是一款開源免費的網頁構建工具，用於構建、編輯和管理靜態和動態的網頁內容。它主要使用 JavaScript 和 HTML、CSS 以及各種 JavaScript 框架開發。這些技術讓 GrapesJS 能夠提供高效、直覺的使用者界面，並支援複雜的拖放功能，使用者能夠輕鬆構建網頁佈局和設計。

GrapesJS 的技術強大之處在於其模組化和可擴充性。它還提供了豐富的 API，使得開發者可以客製化的擴充其功能，並與現有的 Web 應用無縫集成。

GrapesJS 的 Plugin 是可以隨意的安裝擴充模組，這些模組可以增加或修改編輯器的功能。

除了當初開發團隊內置的套件之外，也有社區開發的第三方插件，涵蓋了從新增 UI 元件、提高編輯器功能到彙整第三方服務的各種擴充。通過套件，GrapesJS 使用者可以因應不同的場景和工作流程。

目前 GrapesJS 提供了多種線上編輯器，GrapesJS Studio 是全功能版本：

https://studio.grapesjs.com/

https://grapesjs.com/demo.html

https://grapesjs.com/demo-newsletter-editor.html

https://grapesjs.com/demo-mjml.html

GrapesJS 的主要功能和特色

由於 GrapesJS 是開源且免費的軟體，目前是透過 Web 的方式使用，和其他專業的編輯器比起來，GrapesJS 更專注於網頁設計的呈現。

超簡單上手，可視化拖拽編輯

GrapesJS 的操作方式就是用拖移的，把你要的組件（Blocks）拖到你想要的位置上，然後透過右側面板的「Properties」來展開各項細節的更動，非常簡單就能夠完成超高客製化的變動。

左側的組件（Blocks）非常的多元，幾乎滿足了 EDM、活動頁面的所需。

編輯器的靈活性和擴充性

GrapesJS 的設計是模組化的，這意味著每個功能都是獨立的模組。這種設計使開發者可以根據需求啟用或禁用特定功能模組，從而輕鬆地自定義編輯器。並且提供了強大的視覺化編輯能力，用戶可以通過拖放操作來設計和編排網頁元素，而不需要深厚的編碼知識。這使得設計過程更加直觀和高效。

編輯器支持實時預覽功能，用戶在編輯過程中可以立即看到變更效果，這樣可以快速調整和優化設計，節省了大量的開發時間。

GrapesJS 支援豐富的套件系統，開發者可以通過編寫插件來擴充編輯器的功能。這些套件可以是新的組件、樣式、工具或是編輯器界面的自定義部分。

GrapesJS 提供了全面的 API 和事件系統，允許開發者與編輯器進行深度交互和控制。例如，開發者可以使用 API 來動態添加或修改元素，或者通過事件系統來響應用戶操作和觸發自定義行為。

開發者可以創建和註冊自定義元件，這些元件可以包含特定的功能和樣式，以滿足特定的設計需求。這種靈活性使得 GrapesJS 能夠適應各種不同的項目需求。支援自定義模板和樣式管理，開發者可以創建和使用自定義的 HTML/CSS 模板和樣式表，從而確保設計的一致性和品牌統一性。

作為一個開源項目，GrapesJS 擁有活躍的開發社區。開發者可以從社區獲得幫助、分享套件和擴充，並貢獻自己的代碼，這樣不僅豐富了編輯器的功能，也促進了技術交流和進步。

多種元素支援多種製作需求

GrapesJS 提供了豐富的元素和樣式選擇，能夠滿足多種製作需求，從簡單的靜態頁面到複雜的互動網頁設計，都能輕鬆實現。

GrapesJS 內建多種基本元素與佈局設計，如標題、段落、圖片、視頻、按鈕、表格等，使用者可以通過拖放的方式將這些元素添加到畫布上，輕鬆進行頁面佈局設計。

• 標題與段落：用戶可以選擇不同的標題樣式（H1 到 H6）和段落文字，設置字體、顏色和對齊方式，來製作結構清晰的內容頁面。
• 圖片與視頻：用戶可以插入圖片和視頻，並調整大小、位置和邊框樣式，增強視覺效果。圖片元素還支持添加 alt 屬性，提升無障礙性。
• 按鈕與表單：用戶可以添加各種按鈕和表單元素，並設置其樣式和行為，如按鈕顏色、大小、圓角程度和點擊事件，來實現各種互動功能。

自定義樣式與佈局

GrapesJS 還支援樣式自定義，使用內建的樣式管理器來自定義每個元素的 CSS 樣式，使用者可以輕鬆地調整各種屬性。

• 字體與排版：設置字體家族、字體大小、字體顏色、行高、字間距等屬性，來實現符合品牌風格的文字排版。
• 邊框與陰影：調整邊框的寬度、顏色、樣式，以及添加陰影效果，來增強元素的立體感和層次感。
• 背景與漸變：設置元素的背景顏色、背景圖片和漸變效果，來提升頁面的視覺吸引力和一致性。
• 彈性佈局：使用 Flexbox 模型來進行複雜的佈局設計，支持多種對齊方式和分佈選項，滿足不同的設計需求。

GrapesJS 還支援加入動態效果和互動功能，提升用戶體驗。例如：

• 動畫與過渡：用戶可以為元素設置進場、退場動畫，或者添加過渡效果，如淡入淡出、縮放、旋轉等，讓頁面更加生動。
• 事件與行為：通過設置點擊、懸停等事件，用戶可以實現各種互動效果，如彈出窗口、切換內容、跳轉鏈接等，增強頁面的互動性。
• 自定義代碼：高級用戶還可以直接編寫 HTML、CSS 和 JavaScript 代碼，實現更加複雜的動態效果和功能，滿足特定需求。

全 Web 環境免安裝，免費、開源、社群支援

GrapesJS 完全基於 Web 環境運行，這意味著使用者無需在本地安裝任何軟體或插件。只需要一個現代化的瀏覽器，就可以在任何設備上使用 GrapesJS 進行網頁設計和開發。這種特性帶來了極大的便捷性和靈活性，無論是 Windows、macOS 還是 Linux，任何人都可以輕鬆地在任何操作系統上使用 GrapesJS。

由於無需花時間進行軟體下載和安裝，只要有需要可以即時連上和使用 GrapesJS，大大提高了工作效率。

由於免費，任何人或組織都可以無成本地使用 GrapesJS，這對於資源有限的小型企業和個人開發者尤為有利。

在透明性方面，作為開源項目，所有原始碼都公開，任何人都可以查看、修改和分發。這不僅提升了透明性，還能確保程式碼的安全性和可靠性。再加上開源的性質使得開發者可以根據自己的需求對 GrapesJS 進行自定義和擴充，滿足特定的應用場景。

GrapesJS 擁有一個活躍且強大的社群支援，這對於開發者來說都是一大優勢，社群提供了大量的教學、文檔和範例，幫助新手快速上手並深入了解 GrapesJS 的各種功能。

另外，值得一提的是 GrapesJS Studio 有一個安裝的模式，可以把它安裝成 Chrome App，只需要在網頁模式下點選工具列上面的「齒輪」，它會跳出一個下拉式選單，選擇 install 即會下載一個 Chrome App 在你的電腦上，點選就會開啟執行和網頁一樣的操作介面。

安裝完成後會在你的使用者帳戶中的 Chrome App 中出現，假如你不知道如何找到它，也可以在 Chrome 的網址列輸入「chrome://apps/」來快速的呼出 Chrome 的應用程式面版。

GrapesJS 與其他編輯器的優勢比較

開源與客製化

GrapesJS 是一款開源工具，這意味著它是免費的，並且開發者可以完全編輯其原始碼。這使得 GrapesJS 特別適合需要高度客製化的項目或是需要彙整到現有開發環境中。相比之下，Bootstrap Studio、Blocs、Dreamweaver 和 Sparkle 這些大多是商業軟體，需要付錢才能夠使用發布，且在自定義功能和整合方面可能受限。

技術架構與擴充性

Bootstrap Studio 和 Blocs 主要用在快速構建 RWD 網站（你要拿來寫 EDM 當然也行），提供了許多預定義的模板和組件，但在靈活性和擴充性上可能不如 GrapesJS。

Dreamweaver 雖然提供了強大的編碼功能，雖然也但其客製化和擴充能力需要依賴 Adobe 的生態系統。

Sparkle 則是一款針對 Mac 用戶的設計工具，較重於視覺化設計，但不具備 GrapesJS 那樣的深度客製化和程式擴充能力。

GrapesJS 的模組化架構和豐富的 API 有著極大的靈活性和擴充性。開發者可以輕鬆地建立和整合自定義元件、套件和功能，以滿足特定的需求。這種技術架構使得 GrapesJS 在處理複雜和特定需求的項目時具有優勢。

操作邏輯與用戶體驗

GrapesJS 專注於視覺化編輯和即時預覽，通過直覺的拖放界面和即時反饋，使得網頁構建過程更加便捷和高效。這種操作邏輯使得即使是沒有深厚程式知識的使用者也能輕鬆上手並創建出專業的網頁。

Bootstrap Studio 和 Blocs 雖然也提供了視覺化編輯功能，但可能更側重於預設模板、快速構建、前端開發，軟體中處處可見到自己些改原始碼的部分，這部分就不太適合初學者。

Dreamweaver 雖然也具有強大的編碼和設計功能，但其複雜的界面和較高的學習曲線可能對於初學者和非專業使用者來說不太友好，對一班人來說，學習 Dreamweaver 和學習 IDE 工具是差不多的困難，要學習 Dreamweaver 真的不如去摸索 VSCode、VSCodium、Sublime……。

Sparkle 則強調簡單直覺的設計流程，但在功能深度和定制化能力上有所欠缺；我實際實驗發現它對於 RWD 的支援並不是那麼全面性，做出來的頁面問題多多。

結論

GrapesJS 的優勢和應用價值

GrapesJS 絕對非常適合手上沒有錢又需要製作工具的小公司。

如果每週都有大量的電子報需要發送、製作，但如果能讓每一個行銷都能輕易上手製作 EDM，那麼也可以避免把工作全部都壓在一個人身上。

目前除了線上的 GrapesJS Studio 之外，我自己也會在公司內部的環境架設一個完整的套件包（目前還在修改程式碼），我會階段性的中文化這個工具，假設這個編輯器成為了我們公司 EDM 製作的工具之一，這樣萬一未來 GrapesJS 被商用化而不再提供線上編輯器，我們也能在公司的環境內繼續用。

如果你也想要索取 GrapesJS 整個套件包，請留言給予鼓勵，我做到一個階段的時候會分享出來。