7 個最佳所見即所得 HTML 編輯器開源

有兩種代碼編輯器——簡單的基於文本的編輯器和所見即所得（所見即所得）。在我們之前的文章中，我們討論了一些最好的開源 HTML 編輯器，您可以在其中手動輸入代碼。雖然基於文本的 HTML 編輯器沒有問題，但它們仍然是老派。這就是所見即所得 HTML 編輯器開源的用武之地。所見即所得 HTML 編輯器提供基於視覺的選項來構建網站，而無需任何編程知識（記住 Wix 廣告，這是 wizzy-sig）

WYSIWYG HTML 編輯器與基於文本的編輯器相比有幾個優點。首先，即使您不知道如何編碼，也可以使用 WYSIWYG 編輯器構建網站。您所要做的就是在編輯器中拖放項目，完成後，只需複制代碼。然而，找到一個好的開源 WYSIWYG HTML 編輯器可能是一件苦差事。這就是我們進來的地方。

另請閱讀： 50 多個開源 Android 應用程序，當您想放棄 Google 時

最佳所見即所得 HTML 編輯器開源

1. 佩爾

Pell 可能是您會遇到的最小和最簡單的 WYSIWYG 編輯器。它的大小實際上是 1.38 kb！

它提供所有基本功能和格式，如標題、粗體、斜體、列表、引號、鏈接和圖像。其他可用的操作包括縮進、上標、下標以及字體名稱和大小。使用 Pell 完成編寫和格式化後，它將輸出整個 HTML 代碼，然後您可以簡單地複制並粘貼到您的網站或頁面上，一切順利。

優點：

最小和最輕的所見即所得
無依賴
輕鬆定制

缺點：

沒有花哨的 HTML 編輯
圖片僅通過鏈接

結論：
考慮到它的大小，Pell 製作了一個引人注目的包裝。但老實說，您只能使用有限的編輯選項來完成基本的 HTML 文件。因此，如果您正在尋找一種快速、輕量級的所見即所得編輯器，它是一些非常基礎的工作的開源工具，請務必查看 Pell。

獲得佩爾

2. 開放所見即所得

OpenWYSIWYG 是一個完全用 JavaScript 編碼的跨瀏覽器富文本 HTML 編輯器。只需複制粘貼幾行代碼，您就可以將任何代碼變成 OpenWYSIWYG 強大的 WYSIWYG HTML 編輯器。 帶有下拉菜單的 UI 和編輯選項與任何文本編輯器非常相似，並且您會有賓至如歸的感覺。除了所有基本的格式化選項，OpenWYSIWYG 還擁有一個增強的顏色選擇器，有 216 種網絡顏色可供選擇，還有一個強大的表格格式化工具，裡面有你能想到的所有選項。 OpenWYSIWYG 的另一個優點是除了所有視覺選項外，您還可以查看原始 HTML 代碼並直接在代碼中進行調整。當您想學習或更新您的編碼技能時很有用。 <img loading="lazy" /p> <ul> <li>幾年沒更新了</li> </ul> 結論： 用 JavaScript 編寫，OpenWYSIWYG HTML 編輯器開源應該可以工作與任何其他網絡編程語言。如果您正在尋找比 Pell 更強大的東西來整合到您的 Web 應用程序中，這是一個不錯的選擇。 <a href="http://www.openwebware.com/ demo" target="_blank" rel="noopener noreferrer">獲取 OpenWYSIWYG</a> <h3>3. TinyMCE（社區版）</h3> 我們列表中的下一個開源 HTML WYSIWYG 編輯器是 TinyMCE。它也完全用 JavaScript 編寫，並提供與大多數文字處理器一樣的 UI 和體驗。這使它更加用戶友好。 TinyMCE<a href="https://www.tiny.cloud/pricing/" target="_blank" rel="noopener noreferrer"> 不是免費的</a>，但社區版是免費且開源之一。它配備了所有基本編輯選項，例如格式化文本、列表、表格以及一些圖像編輯選項。 開發人員根據用戶數量保留了高級模型的定價。一些高級功能包括 Google Drive 和 Microsoft Azure 支持、擴展、拼寫和鏈接檢查器以及技術支持。 <img loading="lazy" class=" penci-lazy border aligncenter wp-image- 34916 size-full" src="https://techwiser.com/wp-content/uploads/2018/07/TinyMCE.jpg" data-src="https://techwiser. 用戶友好的用戶界面和過多的功能，是一個完整的軟件包。如果您只想要功能最豐富的所見即所得 HTML 編輯器開源並且願意花一些錢，那麼 TinyMCE 是您的最佳選擇。此外，他們還為其 Pro 型號提供一個月的免費試用期，您可以隨時查看。 <a href="https://www.tiny.cloud/docs/demo/full -featured/" target="_blank" rel="noopener noreferrer">獲取 TinyMCE 演示</a> <h3>4. Jodit</h3> Jodit 是另一個快速、輕量級的所見即所得 HTML 編輯器開源編輯器，您可以將其嵌入代碼並開始編輯頁面。它非常輕巧，大小約為 100 KB，並且完全用 TypeScript 編寫。這就是您不需要任何依賴項或庫來運行它的原因。 它還帶有圖像的拖放界面。您還可以通過鏈接附加 YouTube 或 Vimeo 視頻或嵌入它們。我最喜歡 Jodit 的地方在於，它帶有一個開箱即用的 ACE 編輯器，並且只需一個按鈕，您就可以在實際代碼和預覽模式之間切換。 <img loading="lazy" class="penci-lazy 邊框對齊 wp-image-34917 size-full" src="https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" data-src="https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" alt="Jodit 用戶界面" width="677" height="394" data-srcset="https ://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg 677w，https://techwiser.com/wp-content/uploads/2018/07/Jodit-300x175。jpg 300w" sizes="(max-width: 677px) 100vw, 677px"> <div class="e85e5af91879d860f8283fd1fb4949d1" data-index="2" style="float: none; 邊距：0px 0 0px 0; text-align:center;"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-3072677420592088" data-ad-slot ="1324909417"></ins> </div> 優點： <ul> <li>輕量級，無庫</li> <li>Drag-n- drop</li> <li>開箱即用的 ACE 編輯器</li> <li>技術支持（付費）</li> </ul> 結論： Jodit提供兩全其美 - 簡單的可視化所見即所得編輯器以及編輯原始代碼。如果您至少對 HTML 有一定了解，那麼 Jodit 可能是您的最佳選擇。 <a href="https://xdsoft.net/jodit/play.html" target= "_blank" rel="noopener noreferrer">獲取 Jodit Playground</a> <h3>5. Summernote</h3> Summernote 是一個超級簡單的所見即所得編輯器，基於 jQuery 和 Bootstrap 構建。由於它支持 Bootstrap，因此您可以在 Bootswatch 的編輯器上使用所有受支持的樣式和主題。 所見即所得 HTML 編輯器開源本身俱有非常乾淨和最小的 UI，您甚至可以編輯或添加格式根據您的需要選擇。使用 Summernote 的 Air-mode，您可以隱藏整個工具欄並即時編輯您的文檔。方便的。它還可以自動將所有圖像轉換為base64，因此您根本不必進行圖像處理。 對我來說，Summernote 最棒的部分是它背後的開發人員勤奮的團隊，他們一直在傾聽社區並添加新功能。示例包括對插件的支持以及不需要 Bootstrap 的 Summernote 精簡版或香草版。 <img loading="lazy" class=" penci-lazy border aligncenter wp-image-34918 size-full " src="https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg" data-src="https://techwiser.com/wp-content/uploads/2018/07/Summernote .jpg" alt="Summernote 可視化編輯器" width="677" height="441" data-srcset="https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg 677w, Summernote 值得一試。 <a href="https://summernote.org/" target="_blank" rel="noopener noreferrer">獲取 Summernote 演示</a> <h3>6. Froala</h3> Froala 是一個漂亮的所見即所得 HTML 編輯器開源，用 JavaScript 編寫。它是此列表中較受歡迎的工具之一，它在開發人員中的流行可歸因於其易於集成和簡潔的設計。 Froala 本身就是一個非常強大的編輯器，無數的插件只有一樣增加。其中一些包括高級圖像編輯器、表情符號、拼寫檢查器，甚至可以輕鬆創建自己的插件。所有工具也可以通過內聯編輯器訪問，非常方便。 與 TinyMCE 一樣，<a href="https://www.froala.com/wysiwyg-editor/pricing">Froala 有多種口味</a>，但即使是免費版本也包含大量功能。唯一的區別是您不會獲得完整的源代碼和技術支持。 <img loading="lazy" class=" penci-lazy border aligncenter wp-image-34919 size-full" src="https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg" data-src="https://techwiser.com/wp-content/uploads/2018/07/Froala. jpg" alt="Froala WYSIWYG HTML 編輯器開源" width="677" height="394" data-srcset="https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg 677w, https://techwiser.com/wp-content/uploads/2018/07/Froala-300x175.jpg 300w" sizes="(max-width: >獲取 Froala</a> <h3>7. CKEditor</h3> CKEditor 是一款設計精美的所見即所得 HTML 編輯器開源，深受用戶歡迎。它帶有超過 21k 的測試，可幫助您以友好的佈局學習 HTML。詳細的文檔可以幫助您進一步磨練自己的技能。科技行業的一些知名人士都信任它。 請注意，您必須保持每個文件中的版權聲明完好無損，並且不要刪除位於 CKEditor 安裝文件夾中的 LICENSE.md 文件。這不是一個缺點，尤其是當您獲得如此多的回報時。 支持插件、@mention、表情符號、舊版瀏覽器，甚至可以節省大量時間的自動完成。 p> <img loading="懶惰" p>優點： <ul> <li>詳細的文檔、測試、問題</li> <li>協作和@提及</li> <li>自動完成</li> </ul> 缺點： <ul> <li>保留許可證文件</li> </ul> <a href="https: //ckeditor.com/" target="_blank" rel="noopener noreferrer">獲取 CKEditor</a> 榮譽獎： 1。<a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer">MediumEditor</a> 是 Medium.com 的內聯所見即所得編輯器的開源克隆. 很簡單，輕量級並且沒有任何依賴關係。雖然它不是那麼強大，但它可以作為文本或文本相關文檔的一個很好的內聯編輯工具。 2。Atom 的 <a href="https://atom.io/packages/atom-html-preview" target="_blank" rel="noopener noreferrer">HTML 預覽包</a> 允許您添加一個預覽窗格，其中您可以實時預覽您的 HTML 代碼，這對開發人員非常有幫助。雖然這絕對不適合初學者，但如果您已經使用 HTML 進行編程，它是一個很好的軟件包，可以添加到您現有的工作流程中。 <h3>最佳所見即所得 HTML 編輯器開源</h3> 雖然 HTML 仍然存在建立網站的更強大的方式和更複雜的東西是可能的，所見即所得的編輯已經獲得了自己的位置。學習編碼需要投入大量的時間和精力，而且可能對每個人都沒有意義。如果您之前有編程經驗並且沒有時間學習，那麼您完全可以使用所見即所得的 HTML 編輯器開源。 另請閱讀： <a href="https ://techwiser.com/open-source-browser-for-android/">7 最佳 Android 開源瀏覽器（2018 年）</a> <div class="e85e5af91879d860f8283fd1fb4949d1" data-index="3 " style="float: none; margin:0px 0 0px 0; text-align:center;"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client=" ca-pub-3072677420592088" data-ad-slot="2804037256"></ins> </div> <div style="font-size: 0px; 高度：0px；行高：0px；邊距：0；填充：0；clear: both;"></div> <div class="penci-single-link-pages"> </div>