先列出本文收集的所有程式碼編輯器，後面一一介紹。

Ace

線上程式碼編輯器
    線上編輯各種文字形式的原始碼，如js,html,php等，要支援語法高亮，即時輸入即時高亮。

我的初步想法是用一個<div contenteditable></div>來實現，就是類似於常見的線上網頁編輯器，但是因為僅僅是需要程式碼編輯，所以，要控制只能輸入文字，不能讓使用者插入圖片啊連結啊等等東西，感覺比較難。

希望大家能夠探討一下如何實現。

Bespin是一個用Canvas實現的線上程式碼編輯器，所以不支援IE，而且，因為是Canvas模擬編輯，效率很低，反應遲鈍。
https://bespin.mozilla.com/

  該網址作廢，見後文說明。
Bespin有一個最獨特之處是它竟然是完全用Canvas來實現的，也就是說，所有的高亮程式碼，都是畫在canvas上的，效率並不是特別高，但是方法很別緻，目前還沒見到第二個這樣實現的編輯器。

2012-05-26更新：Bespin已經是過去式了，Mozilla一度將該專案併入Skywriter，但Skywriter專案也關閉了，其網站上僅僅是推薦了2個東西：一個就是Ace高亮程式碼編輯器，另一個是Cloud9 IDE，基於Ace開發的一個雲IDE提供線上的程式設計和儲存。 在ace的網站上，有一段英文介紹了Bespin, SkyWriter, Ace之間的淵源，剛開始，Bespin和SkyWriter是各自獨立的專案，Bespin走Canvas線路，SkyWriter走DOM線路，而Ace是Cloud9 IDE的編輯器元件。後來SkyWriter團隊將Ace合併到SkyWriter專案，再後來又反過來都合併到Ace並完全取代了SkyWriter，現在就只有Ace了，Ace由Ajax.org和Mozilla共同開發和維護。

因為Bespin被廢棄，現在要想獲取Bespin的程式碼還比較困難，從github找到了兩個連結，但是這裡面可能不是最後的版本：

Ace Editor

看起來很不錯，有個很NB的網站Play My Code(playmycode.com)採用了這個編輯器。

Cloud9 IDE，起名者大概借用成語“九霄雲外”吧？

cloud9 ide的編輯器是Ace Editor核心。

Sky-Edit也是採用Ace Editor核心，用法很特別，看截圖的位址列。截圖：

------------------------------------------------------------------------------------------------------------------
問題補充：

kjah 寫道 以前做過這方面預研,可以參考下我預研報告:
http://kjah.javaeye.com/blog/424624
記得實現比較好的是 codepress
js幹這活效率上差很多,由於這個原因實際專案中沒有采用js,還是用的ActiveX

看了你的文章。感覺codepress就是我所需要的。
但我這裡訪問不了 http://codepress.org/
用這個網址就可以了 http://codepress.sourceforge.net/

codepress截圖：


------------------------------------------------------------------------------------------------------------------
問題補充：
查詢舊文件，發現以前就找到過一個和我需要的功能基本一致的程式。
Ecoder，這個也是在sourceforge開源的，我的csdn部落格之前還有記錄過，沒想到竟忘記了。

很讚的線上的程式碼編輯器，支援多種語言彩色語法編輯，罕見精品
http://blog.csdn.net/cuixiping/archive/2009/10/16/4678840.aspx

網址：
http://ecoder.gmeditor.com/
http://sourceforge.net/projects/ecoder/

我看了看，它的實現原理是用一個透明的<textarea>做編輯區，在<textarea>底下用一個<div>來放彩色高亮程式碼，比較巧妙的解決了<textarea>便於輸入卻不便於著色、而<div>便於著色卻不便於輸入的矛盾。
但是有一點點問題，字型會有重影，因為div裡的字和textarea裡的字並非總能完全重合的，選中一段程式碼時更明顯。

------------------------------------------------------------------------------------------------------------------
問題補充：
補充一個處理高亮的js庫：
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/alexgorbatchev/SyntaxHighlighter
http://code.google.com/p/syntaxhighlighter/
SyntaxHighlighter是一個利用Javascript和CSS在客戶端高亮顯示程式碼的小工具，用法非常簡單，引入相應的CSS和JS檔案，然後將程式碼放到一個TextArea....

------------------------------------------------------------------------------------------------------------------
問題補充：
再補充一個在javaeye發現的強大的js語法高亮庫：JSSC

JSSC 3 rc（js語法高亮器 ver3 rc）&& JSSC 2.2 釋出:
http://www.javaeye.com/topic/189502

時隔很久了，JSSC4 beta版終於亮相……
http://www.javaeye.com/topic/291314

jssc ver5.0 alpha
http://www.javaeye.com/topic/459788

關於jssc的專案主頁以及之前的老版本或者想使用它的，請看這裡：

http://code.google.com/p/jssc/
http://jssc.googlecode.com/

------------------------------------------------------------------------------------------------------------------
問題補充：

kjah 寫道 又找到一個更好的:editArea
http://www.open-open.com/ajax/ajax20080713173520.htm
試用了一下感覺不錯
果然強大，你怎麼找到的啊？

不過這個示例網址我這裡打不開，去sourceforge看看。

EditArea
EditArea是一個javascript原始碼編輯器。支援：文字格式化，搜尋與替換，實時語法著色加亮。當前支援的語言包括：PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。
主頁:http://www.cdolivet.com/editarea/
下載:http://sourceforge.net/project/showfiles.php?group_id=164008
示例:http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html


------------------------------------------------------------------------------------------------------------------
問題補充：
另外發現了一款線上編輯php的，名叫phpAnyWhere，看介紹應該是很強大的，但是由於必須要先有ftp伺服器賬號，而我填好真實有效的ftp後還是一直提示“Unable to connect to server!”鬱悶，也就沒能進到裡面的編輯介面了。
CodeAnyWhere (原名phpAnyWhere)
網址：http://phpanywhere.net/

是一個線上的PHP開發環境，能夠實時編輯和語法高亮PHP,HTML,JS,CSS等web格式檔案，並且它是直接連線到你的FTP伺服器的，儲存時更新到FTP伺服器。

支援語法高亮、智慧縮排、程式碼摺疊、程式碼智慧提示等功能，在各種線上編輯器裡算是比較完善的一個。



------------------------------------------------------------------------------------------------------------------
問題補充：
kjah 提到的這個editarea （http://sourceforge.net/projects/editarea/）
和 gmeditor ecoder（http://sourceforge.net/projects/ecoder/）比較相似了，都是通過透明textarea遮蓋div來實現效果。

------------------------------------------------------------------------------------------------------------------
再補充：
下面兩個帖子裡的實現也值得看看：

線上程式碼編輯器（原型）  http://www.javaeye.com/topic/727718

javascript開發css語法提示(CodeHints)功能    http://kjah.javaeye.com/blog/427291

根據上面帖子中一位朋友提到的CodeMirror，找到了它

CodeMirror     這個灰長推薦啊！

CodeMirror可以說是大名鼎鼎，這是一個比較成熟的實現了，支援幾十種程式語言的線上編輯，支援所有主流的瀏覽器。

支援自動完成、程式碼摺疊、HTML預覽、全屏、程式碼格式化、Mustache模板高亮等，並且其更新相當活躍。

有一篇分析codemirror原理的文章寫的不錯，中文的：CodeMirror程式碼加亮原理