在世界上 編碼和程式設計 程式碼編輯器有兩種類型： 簡單編輯器 基於文字和 所見即所得 （wizzy-wig 的縮寫，即所見即所得）。在我們之前的文章中，我們討論了一些 最佳開源 HTML 編輯器 手動輸入代碼。雖然基於文字的 HTML 編輯器沒有問題，但它們已經過時了。這就是所見即所得的圖像編輯器的用武之地。它在過去幾年裡變得非常流行。不像 HTML程式設計 實際和其他技術內容 建立您自己的網站 WYSIWYG HTML 編輯應用程式提供視覺化選項。 建立網站 無需任何程式設計知識（記住 Wix 廣告 這太神奇了）
WYSIWYG HTML 編輯器有很多優點 基於文字的編輯應用程式首先，你可以建立一個網站 所見即所得編輯器 即使你不懂編程，也只需將元素拖放到編輯器中，完成後複製程式碼即可。然而，要找到一個好的所見即所得 (WYSIWYG) HTML 編輯器並不容易，尤其是在你需要一個開源且免費的編輯器的情況下。因此，在本文中，我們整理了我們能找到的最好的開源所見即所得 HTML 編輯器。讓我們開始吧。好嗎？
最佳開源所見即所得 HTML 編輯器
1.佩爾
Pell 可能是您遇到的最小、最簡單的所見即所得編輯器。它的大小只有 1.38 KB！
它提供了所有基本功能和格式設置，例如標題、顏色、粗體、斜體、列表、引號、鏈接，甚至圖片。其他可用操作包括縮排、上標、輪廓以及字體名稱和大小。使用編輯器完成編寫和格式化後，Pell 會輸出完整的 HTML 程式碼，您只需將其複製並貼上到您的網站或頁面上即可。
正面：
- 最小、最輕的所見即所得應用程式
- 無依賴關係
- 輕鬆客製化
缺點：
- 無需 HTML 編輯
- 僅透過連結獲取圖像
判決：
考慮到它的大小，Pell 是一款非常吸引人的軟體包。但說實話，它只能處理基本的 HTML 文件，而且編輯和修改選項有限。所以，如果你正在尋找一款快速、輕量級的所見即所得編輯器來處理一些非常基礎的工作，那麼 Pell 值得一試。
嘗試 佩爾 這裡
2. 開放所見即所得
OpenWYSIWYG 是一款功能豐富的多瀏覽器文字編輯器，完全由 JavaScript 編寫。只需複製幾行程式碼，您就可以將任何為 OpenWYSIWYG 提供強大的所見即所得編輯器。
它的使用者介面和編輯選項（帶有下拉式選單）與任何文字編輯器類似，讓您輕鬆上手。除了所有基本的格式選項外，程式還配備了增強的顏色選擇器，提供 216 種基於 Web 的顏色供您選擇，以及功能強大的表格格式化工具，提供您能想到的所有選項。
OpenWYSIWYG 的另一個優點是，透過所有視覺化選項，您仍然可以查看原始 HTML 程式碼並對程式碼進行修改。
正面：
- 強大的編輯環境
- 使用者介面直覺且簡單。
- 豐富的顏色選擇器和表格編輯選項
缺點：
- 它已經有好幾年沒有更新了。
判決：
OpenWYSIWYG 是用 JavaScript 編寫的，可以與任何其他 Web 程式語言相容，如果您正在尋找比 Pell 更強大的功能來包含在您的 Web 應用程式中，那麼這是一個很好的選擇。
開放所見即所得 演示可在此處獲取
3. TinyMCE（社群版）
我們清單中的下一個編輯器是 TinyMCE，這是一款功能齊全的 Web 所見即所得編輯器。它也完全用 JavaScript 編寫，並提供與大多數文字處理器類似的使用者介面和體驗。
嗬嗬 TinyMCE 有許多選項 社群版是免費開源版本。它包含所有基本編輯選項，例如文字格式、清單和表格，以及一些圖像編輯選項。
開發人員根據用戶數量對高級版進行定價——用戶越多，付費越多。進階版功能包括：從 Google Drive 或 Microsoft Azure（而非您自己的伺服器）上傳和管理所有文件、附加元件支援、拼字檢查器、連結檢查器以及進階技術支援。
正面：
- 插件支持
- 檔案管理
- 技術支援
- IDE 風格的 HTML 程式碼編輯器
缺點：
- 價格
- 並非完全開源
判決：
TinyMCE 擁有便利的整合選項、直覺的使用者介面以及豐富的功能（包括技術支援），堪稱完美之選。如果您只想擁有功能最豐富的開源所見即所得 HTML 編輯器，並且不介意花費一些錢，那麼 TinyMCE 是您的理想之選。他們還提供專業版一個月的免費試用，您可以隨時試用！
嘗試 TinyMCE 演示 這裡
4.喬迪特
Jodit 是一款快速、輕量級的所見即所得編輯器，您可以將其嵌入到程式碼中並開始編輯頁面。它非常輕量，大小約為 100KB，並且完全以 TypeScript 編寫，因此您無需任何依賴項或庫即可運行它。
Jodit 是最用戶友好的所見即所得編輯器之一，提供複製、貼上和拖放圖像等功能。您也可以透過連結附加或嵌入 YouTube 或 Vimeo 影片。
我最喜歡 Jodit 的地方在於它自備 ACE 編輯器，只需一個按鈕，即可在實際程式碼和預覽模式之間切換。您可以直接在程式碼中進行編輯，也可以直接將其複製並貼上到您的網站中。
正面：
- 輕量級，無需庫
- 拖放
- 開箱即用的 ACE 編輯器
- 技術支援選項（膾炙人口)
判決：
Jodit 為您提供兩全其美的解決方案——便捷的視覺化所見即所得編輯和原始程式碼控制。如果您至少具備一些 HTML 知識，Jodit 可能是您的最佳選擇。
嘗試 喬迪特
5. 夏日筆記
Summernote 是一款基於 jQuery 和 Bootstrap 構建的簡潔所見即所得編輯器。由於它支援 Bootstrap，您可以在編輯器中使用 Bootswatch 支援的所有樣式和主題。
編輯器本身擁有非常簡潔的使用者介面，您甚至可以根據需要編輯或添加格式選項。使用 Summernote 的 Air 模式，您甚至可以隱藏整個工具列並即時編輯文件。除了所有基本的格式選項、拖放和複製/貼上圖像外，它還會自動將所有圖像轉換為 Base64 格式，因此您無需進行任何圖像處理。
對我來說，Summernote 最好的地方在於它背後勤奮的開發團隊，他們始終傾聽社群的意見並添加新的變化，例如插件支援、不需要 Bootstrap 的 Summernote 的精簡版或原始版。
正面：
- 最低學習曲線
- 空中模式可快速釋放
- 支持 Bootstrap 3.xx 至 4.xx
- 以 HTML 格式檢視和編輯
否定：
- 不支援插件
- 需要引導程式
判決：
Summernote 可能是市面上功能最豐富且免費的所見即所得編輯器，而且還在不斷改進。如果你使用 Bootstrap，那麼 Summernote 的使用並不費腦力；即使你使用 Bootstrap，Summernote 也值得一試。
6. 弗羅拉
最後但同樣重要的是，編輯 佛羅拉 Froala 是一款以 JavaScript 編寫的精美所見即所得應用程序，是此列表中最受歡迎的工具之一，其在開發人員中的受歡迎程度歸功於其易於整合和簡潔的設計。
Froala 本身就是一款非常強大的編輯器，無數的插件進一步增強了它的功能。它擁有超過 30 個插件，包括精緻的圖片編輯器、表情符號和拼字檢查器，並且可以輕鬆創建自己的插件。所有工具都可以與內建編輯器同時使用，非常方便。
像 TinyMCE 一樣，它 Froala 也有多種口味。 然而，即使是免費版本也包含了所有功能。唯一的區別是您無法獲得完整的原始程式碼和技術支援。
正面：
- 強大、輕量級的編輯器
- 內嵌編輯
- 大量附加元件
否定：
- 不是一個很大的手機應用程式/網站。
判決：
Froala 速度快、輕量，擁有美觀的使用者介面，同時也提供了所有使用者在所見即所得的 HTML 編輯器中可能需要的功能。如果您不介意原始程式碼和技術支持，那麼免費版本就足夠了；否則，您知道該怎麼辦了；沒有比這更好的了。
演示：嘗試一下 佛羅拉 這裡
7. CKEditor
CKEditor 是一款設計精美、開源的所見即所得 HTML 編輯器，深受使用者喜愛。它提供超過 21 個測試，幫助您以易於使用的佈局學習 HTML。詳盡的文件可協助您進一步磨練技能。許多科技業的大佬都信賴它。
請注意，您需要在每個檔案中保留版權聲明，並且不要刪除 CKEditor 安裝資料夾中的 LICENSE.md 檔案。這並不是什麼缺點，尤其是當您獲得如此多的回報時。
它支援擴充功能、@mention、表情符號、舊版瀏覽器，甚至自動完成功能，可以為您節省大量時間。
正面：
- 詳細的文件、測試和問題
- 合作
- 自動完成
否定：
- 保留許可證文件
得到 CKEditor的
特別說明：
1. Medium編輯器 它是 Medium.com 內建所見即所得編輯器的開源克隆版。它簡潔、輕量，並且沒有任何依賴項。雖然功能不如 Medium.com 強大，但它可以作為文字相關文件的優秀內建編輯工具。
2. 該套餐允許您 HTML 預覽 Atom 新增了預覽窗格，可讓您即時預覽 HTML 程式碼，這對開發人員來說非常有用。雖然它不適合初學者，但如果您已經在進行 HTML 編程，那麼它是一個很好的擴展包，可以添加到您現有的工作流程中。
最好的開源所見即所得 HTML 編輯器
雖然那 HTML 它仍然是最強大的方法。 建立一個網站 然而，更複雜的事情也是可能的，所見即所得的編輯器已經贏得了一席之地。學習程式設計需要大量的時間和精力，可能不適合所有人。如果你 以前的程式設計經驗 如果您沒有時間學習，您可以使用開源的所見即所得 HTML 編輯器來完全解決這個問題。
好了，以上就是一些目前市面上最好的開源所見即所得 HTML 編輯器。你選擇了哪一款，或是你已經在使用哪一款？請在下方留言處留言告訴我們。
