基于Web的代碼編輯器是一種用于直接在Web瀏覽器中編寫代碼的應用，無需在本地安裝任何軟件。它提供了一個在線開發環境，開發人員可以在其中編寫代碼、預覽效果、更改代碼并與團隊成員實時協作。

基于Web的代碼編輯器對于團隊之間的協作非常重要，有許多優勢：

• 可訪問性：基于Web的代碼編輯器可以從任何具有互聯網連接的設備訪問，使團隊成員可以輕松地遠程協同工作。這種可訪問性具備更大的靈活性，并支持跨地區和跨時區的協作。
• 實時團隊協作：基于Web的代碼編輯器通常支持實時協作功能，允許多個團隊成員同時處理同一代碼。開發人員能夠在項目上進行協作，一起編輯和審查代碼，并即時反饋。
• 版本控制集成：與Git等版本控制系統集成，使團隊能夠管理和跟蹤代碼庫的變更。通過兩者集成，以提供集中的代碼存儲庫，促進工作流的順暢協作，從而簡化協作。
• 代碼共享和審查：基于Web的代碼編輯器提供了與團隊成員共享代碼片段或整個項目的簡單方法。這簡化了代碼評審的過程，團隊成員可以直接在編輯器中留下評論、提出更改建議、提供反饋。
• 跨平臺兼容性：基于Web的代碼編輯器一般獨立于平臺，允許開發人員使用不同的操作系統（Windows、macOS、Linux）進行協作，而不會出現兼容性問題。具備較高包容性，不管團隊成員的開發環境如何都能夠為項目做貢獻。

本文主要推薦一些比較好的開源Web代碼編輯器，以直接體驗或嵌入到你的產品中。

1.Monaco Editor

https://github.com/microsoft/monaco-editor

Monaco編輯器是微軟開發的基于Web的代碼編輯器，由VS Code提供功能支持。體驗地址：https://microsoft.github.io/monaco-editor/playground.html

優點：

• 具有語法突出顯示、代碼完成和調試功能的豐富功能集。
• 高度可定制和可擴展。
• 性能出色，即使是大型代碼庫。
• 支持多種編程語言。
• 與其他工具和框架的集成。

缺點：

• 與更簡單的代碼編輯器相比，學習曲線更陡峭。
• 由于其功能豐富的性質，需要更多的資源來運行。
• 有限的離線功能，因為它主要在網絡環境中運行。

2.OpenVSCode Server

https://github.com/gitpod-io/openvscode-server

這個項目提供了一個可以在遠處服務器上運行的VS Code，允許通過Web瀏覽器進行訪問。

它基于Gitpod和GitHub Codespaces的技術架構。VS Code團隊對其架構進行重構，以支持基于瀏覽器的工作模式，并且該項目共享了使用最新版本的VS Code所需的最小更改集，具有簡單的升級路徑和低維護工作量。

3.ecode

https://github.com/SpartanJ/ecode

ecode是為現代硬件設計的輕量級代碼編輯器，專注于響應性和性能。它利用硬件加速的eepp GUI，并改進eepp GUI庫。

功能特征：

• 輕巧便攜
• 極簡的GUI，可定制的配色方案
• 支持50多種語言的文本高亮顯示和LSP語義高亮顯示
• 多光標支持，實現高效編輯
• 終端集成，實現無縫命令執行
• 用于快速訪問編輯器功能的命令行
• 自動完成和可定制的鍵盤綁定

4.Code Server

https://github.com/coder/code-server

Code-Server是一個支持在瀏覽器中運行VS Code的開源項目，能夠在任何設備上提供一致的開發環境。它還支持使用云服務器以獲得更快的執行效率，并為移動的用戶保留電池壽命。

5.Tabby

https://github.com/TabbyML/tabby

Tabby是一個可以私有化部署的AI編碼助手，提供了GitHub Copilot的開源和本地部署方案。它是獨立的，不需要DBMS或云服務，具有易于集成的OpenAPI接口，并支持消費級GPU。

另外，Tabby可以使用Docker輕松安裝。

6.Neko Code Editor

https://github.com/flyingcatdeveloper/nce

Neko Code Editor是一個簡單的代碼編輯器，具有Monaco Editor類似的功能，包括：控制臺、在新選項卡中打開代碼、多文件功能、項目管理、DevLog更新、本地數據保存、可自定義設置等功能。

功能特征：

• Monaco編輯器功能：具有代碼自動完成、MDN應用等功能。
• 控制臺：只需單擊一個按鈕即可輕松查看控制臺。
• 在新選項卡中打開代碼：查看代碼時，它看起來就像一個網頁。
• 多文件功能：擁有盡可能多的文件，支持HTML，CSS，文件夾和JS文件。
• 儀表板：在一個位置查看所有編輯器，沿著顯示上次打開它們的時間。
• 項目導入：開始在新設備上工作或通過導入項目恢復已刪除的數據。
• 項目下載：安全下載整個項目，以防止意外數據丟失。
• 保持更新：隨時了解DevLog的新功能和修復。
• 數據備份：數據使用localStorage和IndexedDB保存，可以輕松加載到項目。
• 自定義設置：自定義編輯器的設置，包括編輯器名稱、自動保存和文件壓縮。

7.CodeMirror

https://github.com/codemirror/dev/

https://codemirror.net/

CodeMirror是一個可擴展的Web代碼編輯器組件，可用于實現具有高級編輯功能和豐富編程接口的文本輸入，并支持進行進一步擴展。

功能特征：

• 可訪問性：適用于屏幕閱讀器和鍵盤用戶。
• 移動的支持：在手機上使用平臺的本地選擇和編輯功能。
• 雙向文本：支持從右到左和從左到右的混合文本。
• 高亮：顏色代碼，以反映句法結構。
• 顯示行號：顯示代碼旁邊帶有行號或其他信息的間距。
• 自動完成：在編輯器中提供特定語言的完成提示。
• 代碼折疊：暫時隱藏文檔的某些部分。
• 搜索/替換：特定于編輯器的搜索、regexp搜索和替換功能。
• 完整解析：詳細的解析樹允許許多類型的語言集成。
• 擴展接口：健壯地實現要求苛刻的編輯器擴展。
• 模塊化：大多數特性都是在通用公共API之上實現的。
• 速度：即使在大型文檔和長行上也能保持響應。
• 自動關閉：在鍵入時自動插入匹配的括號。
• Linting：在編輯器中顯示錯誤和警告消息。
• 靈活的樣式：混合字體樣式和大小，在內容中添加小部件。
• 主題化：導入或創建自定義可視化編輯器樣式。
• 協作編輯：允許多個用戶編輯同一文檔。
• 歷史記錄撤銷：支持協作編輯的撤銷、重做功能。
• 多個選擇：一次選擇和編輯文檔的多個范圍。
• 國際化：提供自定義文本以顯示或通知用戶。

8.CodeFlask

https://github.com/kazzkiq/CodeFlask

CodeFlask是一個輕量級、可定制的基于Web的代碼編輯器。它提供了一些基礎的代碼編輯功能，如：語法突出顯示、自動完成和代碼格式化。CodeFlask的設計目標為易于使用，可以被輕松地集成到Web應用程序中。當需要一個簡單和輕量級的代碼編輯器時，它是一個合適的選擇。

9.CodeJar

https://github.com/antonmedv/codejar

CodeJar是一個強大的開源、可嵌入的Web代碼編輯器。

功能特征：

• 輕量級（僅2.45 kB）
• 沒有依賴關系
• 適用于Chrome，Safari，Firefox，iOS，iPadOS，Android.
• 支持在新行上保留縮進
• 自動添加右括號、引號
• 使用Tab鍵縮進
• 支持撤消、重做
• 可以使用任何高亮顯示庫， 如：PrismJS or  或 highlight.js 或自定義開發

10.Rustpad

https://github.com/ekzhang/rustpad

Rustpad是一個基于操作轉換算法的高效和最小的開源協作文本編輯器。只需要一個小的Docker鏡像，并且不需要數據庫。服務器是使用Rust編寫的warp web服務器框架，而前端是使用TypeScript編寫的React和Monaco接口。

編輯器通過WebSocket與服務器進行通信，性能高效，但在服務器重新啟動或24小時不活動后可能斷開連接，導致臨時文檔丟失。

11.ICEcoder

https://github.com/icecoder/ICEcoder

ICEcoder是一個基于瀏覽器的代碼編輯器，允許高效的網站開發和維護。它可以在線或離線使用，并與Linux，Windows和Mac平臺兼容。唯一的要求是PHP 7（推薦使用7.4）。

但需要注意的是，目前這個開源庫已經停止更新。