20個最強的基於瀏覽器的在線代碼編輯器

時間 2019-12-13

原文原文鏈接

1. Compilr

Compilr是一個在線編譯器和在線IDE。能夠用它來開發PHP, C, C++, Ruby。在瀏覽器中編譯Java, C# 和 VB.net等。

立刻使用
javascript

2. Dabblet

跨瀏覽器兼容，對前端攻城師們來講是一個不得不處理的問題。爲了在瀏覽器間呈現統一的顯示效果，攻城師們不只要爲每一個遊覽器添加CSS前綴，甚至還須要用到一些特殊的CSS Hack技巧。因而，jsFiddle、JSBin等前端代碼的在線測試工具應運而生。然而，使用jsFiddle仍有不少不便之處。爲了解決這個問題，前端攻城師Lea Verou本身動手，開發了一個名爲Dabblet的HTML和CSS代碼段在線測試工具。

立刻使用
php

3. jsdo.it

立刻使用
css

4. Thimble, by Mozilla

Firefox 瀏覽器背後的非營利性組織Mozilla 剛剛宣佈推出了一個名爲Thimble 的HTML/CSS在線交互式學習網站，該站是Mozilla 新近推出的Webmaker計劃的組成部分，旨在幫助普通用戶在線學習編寫HTML和CSS。html

Thimble 提供的是雙面板設計，左側爲帶語法高亮的代碼編輯，右側可實時預覽網頁效果，若是用戶對效果滿意，可經過右上方的藍色「Publish」按鈕一鍵發佈，還可經過提供的Twitter 發佈按鈕與好友分享你的設計成果。

立刻使用
前端

5. Jsfiddle

jsFiddle是一個在線的shell編輯器，經過流行的JS框架建立自定義的環境，以簡化JS代碼。能夠用於測試示例代碼。java

不只如此，你還能夠添加一個Ajax echo後端，而且經過一系列的JavaScript框架自動載入資源，如MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla等。

還有一個重要特性就是可以保存和分享一個unique URL generated代碼，jsFiddle還有一個嵌入的功能。

它提供了一個由4各部分組成的界面：python

HTML 編輯器git
CSS 編輯器github
JavaScript 編輯器web
輸出界面

立刻使用

6. CodeMirror

又一款「Online Source Editor」，基於Javascript，短小精悍，實時在線代碼高亮顯示，他不是某個富文本編輯器的附屬產品，他是許多大名鼎鼎的在線代碼編輯器的基礎庫。

能夠看出，CodeMirror的做者是一個十分嚮往自由的人。但他的CodeMirror絕對不簡單，看看下面這份清單：

上述的這些在線代碼編輯器都是基於CodeMirror的，是否是感到驚訝，裏面有你熟悉的JS Library。

CodeMirror自己的定位也很明確，短小精悍，但代碼質量很高，在Google Group的羣裏面，人們熱烈的進行着用CodeMirror作各式各樣改造的討論，可見對他的歡迎。如下有各類不一樣語言的Demo演示：

JavaScript
XML/HTML
CSS
SPARQL
HTML mixed-mode
HTML+PHP mixed-mode (courtesy of Yahoo!)
Python (by Timothy Farrell)
Lua (by Franciszek Wawrzak)
Ruby (by Michal Hantl, unfinished)
SQL (by John Benediktsson)
PLSQL (by Peter Raganitsch)
diff (courtesy of Liran Nuna)
Groovy (by eXo Platform)
C# (by Boris Gaber and Christopher Buchino)
OmetaJS (by Eric KEDJI)
Scheme (by Danny Yoo)

假如你有項目須要在線代碼編輯，還等什麼？CodeMirror，絕對是你最好的選擇。

立刻使用

7. eXo Cloude IDE

　應用程序開發也在轉向雲。eXo開發了一個平臺即服務(PaaS)，成爲eXo Cloud IDE。這個IDE能夠方便地在雲上面部署Java應用程序。代碼存在於雲中，能夠經過互聯網進行訪問。所以，將一個應用程序從開發階段轉向生產階段的速度能夠更快。

　　VMware的Cloud Foundry PaaS已經在用這個方法。它幫助開發人員建立Java、Spring、Ruby和其餘類型的應用程序並在數分鐘內部署到Cloud Foundry。全部這些都是在雲內完成。

立刻使用

8. JS Bin

JSBin 是一個 Web 應用，主要用於幫助測試 JavaScript 和 CSS 的代碼片斷。功能與 jsFiddle 網站一致。

立刻使用

9. CodeRun

　　CodeRun Studio 是一個基於JavaScript語言開發的跨平臺的集成開發環境，它立足於雲計算的設計思路，方便開發者在瀏覽器端即可以輕鬆開發、調試和部署網絡應用程序。自己做爲一款APP產品，CodeRun 融入了分享機制，開發者能夠有選擇的上傳項目代碼，使用雲技術來協同同事完成項目工做。目前，CodeRun 主要支持一些Web開發語言，包括C#/.NET (3.5)， PHP (5.1)， JavaScript, HTML 以及 CSS等，其中C#項目包括ASP.NET, WCF, Silverlight 和 WPF, MVC等項目，JavaScript腳本項目支持目前流行的JQuery， ExtJS, YUI等框架，其中數據庫支持SQL Server 2005 和 Amazon SimpleDB。最後，更尤其值得一提的是，CodeRun 是開源程序。

立刻使用

10. eCoder

ecoder是一個基於Web的代碼編輯器，採用PHP和JavaScript開發。它包括：實時語法加亮，一個文件瀏覽器，一個文件上傳器和一個標籤系統可以實現直接在服務器上同時編輯多個文件。

立刻使用

11. Kodingen

kodingen在線雲IDE，集成了圖片編輯器，代碼編輯器，甚至集成了大量的服務器特性，其中就包括自帶SQL數據庫，能夠建立MySql數據庫，擁有本身獨立的FTP文件系統，提供了對協同辦公的支持，Kodingen在不工做的時候你甚至還能夠把它當獨立服務器來使用。建好一個賬號後，用戶就能夠經過xxx（用戶名）.kodingen.com直接使用，默認開啓php支持，ror支持，能夠設置支持perl，python。

免費用戶提供：500M空間，1G/月流量，1個二級域名，6個三級域名， 5個數據庫，綁5個FTP賬號。提供三種代碼編輯器能夠選擇：bespin，codemirror，ymacs。能夠一鍵安裝常見的應用：如 wordpress，drupal，phpmyadmin，cakephp，mediawiki，phpbb， joolma等等。

立刻使用

12. EditArea

EditArea，一款基於Javascript的、在線的、支持高亮的源代碼編輯器。這個編輯器的設計初衷旨在以一個Teaxarea提供在線代碼編輯功能，除了提供語法即時高亮之外，還提供文本搜索、替換等功能。

固然了，該款編輯器是開源的，基於LGPL、Apache和BSD協議。

主要特性：

易於嵌入HTML頁面使用，只包括一個腳本和函數調用。
支持Tab按鍵
多種語言實時高亮，包括PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic還有不少，太多了，不列舉了。
Word-wrap支持（不瞭解什麼功能）
搜索、替換還有正則表達式
新建行的格式自動縮進
行數顯示提示
多語言支持
容許一個頁面內多個實例
支持全屏牧師
支持插件機制
支持保存時、加載時的回調函數
可動態內容管理（不理解）
能夠與相似prototype或mootools這種js lib下並行使用（無衝突）

立刻使用

13. Codeanywhere

Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML.

立刻使用

14. Codeita

CodeRun - 一個免費的，跨平臺的基於瀏覽器的IDE是一個自由和開放源碼基於Web的IDE，它採用了原生支持C＃/。淨額（3.5），PHP的（5.1），JavaScript，HTML和CSS的。 C＃中支持包括ASP.NET中，WCF中，瀏覽器的Silverlight和WPF應用程序開發和部署。數據庫支持包括SQL Server 2005和亞馬遜SimpleDB的。
語法着色和代碼完成的功能，幫助您在開發過程當中。它還具備一個在線調試器，容許您設置斷點，經過您的代碼的步驟，檢查調用棧，調試和其餘行動。
你能夠或者使用做爲您的桌面IDE中，徹底取代了功能豐富和強大的CodeRun或者你能夠用它來上傳現有的代碼和測試在雲端，或與您的同行分享。

立刻使用

15. Drawter

Drawter是一個基於Web的編輯器（寫在JavaScript和jQuery庫爲基礎），有很多字面上能夠請你網站的代碼與每一個標記，做爲一個你畫層提出。
目前Drawter是在Pro版本（它仍然是免費的），這意味着對HTML和CSS知識是必不可少的。該Drawters發展的將來目標是創建一個業餘的版本，這將容許您繪製沒有任何HTML或CSS的知識是什麼，這樣的一次您的網站。留意其今年推出一段時間。

立刻使用