20款優秀的基于瀏覽器的在線代碼編輯器

1. Compilr

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

2. Dabblet

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

3. jsdo.it

馬上使用

4. Thimble, by Mozilla

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

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

5. Jsfiddle

jsFiddle是一個在線的shell編輯器，通過流行的JS框架創建自定義的環境，以簡化JS代碼。可以用于測試示例代碼。

不僅如此，你還可以添加一個Ajax echo后端，并且通過一系列的JavaScript框架自動載入資源，如MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla等。

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

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

• HTML 編輯器
• CSS 編輯器
• JavaScript 編輯器
• 輸出界面
  馬上使用
  

6. CodeMirror 五星推薦！

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

可以看出，CodeMirror的作者是一個十分向往自由的人。但他的CodeMirror絕對不簡單，看看下面這份清單：

• Google Earth KML sampler
• Eloquent JavaScript’s console
• The qooxdoo playground
• A cool tutorial about the element
• An online IDE for the Orc programming language
• Google’s API playground
• Rapha?l Live
• JS Bin
• The RokPad plugin for Joomla
• The scraperwiki editor
• jsLinb UI Builder

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

CodeMirror本身的定位也很明確，短小精悍，但代碼質量很高，在Google Group的群里面，人們熱烈的進行著用CodeMirror做各式各樣改造的討論，可見對他的歡迎。以下有各種不同語言的Demo演示：

• JavaScript
• XML/HTML
• CSS
• SPARQL
• HTML mixed-mode
• HTML+PHP mixed-mode(courtesy ofYahoo!)
• Python(byTimothy Farrell)
• Lua(byFranciszek Wawrzak)
• Ruby(by Michal Hantl, unfinished)
• SQL(by John Benediktsson)
• PLSQL(byPeter Raganitsch)
• diff(courtesy ofLiran Nuna)
• Groovy(byeXo Platform)
• C#(byBoris Gaber and Christopher Buchino)
• OmetaJS(byEric KEDJI)
• Scheme(byDanny 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的知識是什么，這樣的一次您的網站。留意其今年推出一段時間。

馬上使用

16. Maqetta

Maqetta，一個創建桌面和移動用戶界面的HTML5設計編輯工具，并同時宣布將項目捐助給開源機構Dojo基金會。

Maqetta已經是開源項目，提供WYSIWYG可視化HTML5用戶界面設計功能，僅需簡單的拖曳操作，支持桌面和移動用戶界面。

Maqetta 應用本身用HTML5/Ajax編寫，因此運行在瀏覽器中無需請求額外的插件或下載。用戶可以下載源碼，并安裝在自己的服務器上，并可自定義源碼來滿足自己的需求，再回饋到開源項目。

Maqetta 功能如下：

• WYSIWYG可視化頁面編輯
• 拖曳式移動UI設計
• 設計或源碼瀏覽同步編輯
• 對CSS樣式的深度支持

馬上使用

17. Builder Pro

BuildorPro使用可視化，代碼編輯器，調試工具來供了一個非常靈活的方法創建和管理你的網站的設計和商標。BuildorPro你可以使用可視化控制，提高您的設計過程，同時保持完全的控制權代碼本身。
馬上使用

18. ShiftEdit

ShiftEdit，一款在線IDE，支持創建，編輯PHP，HTML，CSS，ruby，JavaScrip等語言，提供內置的FTP，支持實時調試語法，ShiftEdit功能還在增加中。

馬上使用

19. Squad Editor

Squad是一個基于網頁的代碼編輯器，可相互協作，你可以在任何地方訪問它。
馬上使用

20. Cloud9 IDE

Cloud9利用了云技術，運行在瀏覽器中，允許你隨時隨地運行、調試和部署應用程序。一個完整的game-changer會永久性的改變應用程序的開發方式。Cloud 9可以讓你集中精力編程，不用顧及到搭建環境等瑣事中。
馬上使用　

轉自：http://www.open-open.com/news/view/1dc36fe

總結

以上是生活随笔為你收集整理的20款优秀的基于浏览器的在线代码编辑器「建议收藏」的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。