在線代碼編輯器/IDE是如何實現的？

12-29

試用了幾個在線IDE，看了一下頁面代碼，似乎也都是通過&標籤加CSS樣式實現的。自己對前端不是特別熟悉，為什麼不通過textarea實現？是不是在textarea中，很難進行highlight？通過div實現，是不是要實現很多textarea自帶的功能，比如游標，Copy+Paste等等？

textarea不能作為富文本編輯器使用，高亮加粗等在textarea中都是無法實現的，除非你手寫代碼。

其實一開始我以為這些代碼編輯器和傳統的富文本編輯器是一樣的，後來發現不是的。

下面先說說富文本編輯器，為了方便區分就用引用格式了：

富文本編輯器是瀏覽器所支持的功能，開啟designMode或者contentEditable，就可以實現富文本編輯。註：IE是最早實現富文本編輯的。
這段代碼可以實現一個簡單的可編輯div：
&&
這樣一來這個div就是一個編輯器，編輯器裡面的內容可以有樣式，粗細，顏色等等。從一個網頁複製一些內容粘貼到這個編輯器裡面，標籤內容也會被保留。

然後通過execCommand等實現編輯器功能，具體實現比較複雜，各個瀏覽器不太一致，最重要的是我沒研究，就不說了。

我觀察了五個不同的能高亮的在線IDE（不能高亮的就算了，那肯定是textarea）。

比如這個Slim Text - a slim text editor running inside Chrome

還有Ace - The High Performance Code Editor for the Web

dabblet.com

然後我發現：這五個web IDE中，只有一個使用了將div設置為可編輯模式的方式，其餘四個都沒有這麼做。

為什麼這些在線IDE沒有和傳統富文本編輯器一樣？

我的看法是：

傳統富文本編輯器遵循可見即可得原則，用戶可以方便粘貼從其他地方複製過來的東西，並保持標籤內容，如果複製源是其他富文本編輯器生成的內容，基本可以保證複製源和粘貼後的樣式一致；而在線IDE沒有這方面的要求，用戶複製過去的東西反而需要去掉標籤,不方便。
游標樣式。IDE裡面，游標是可以通過insert鍵切換模式的，這個在我列舉的前兩個編輯器中均已實現，這個在網頁中就只能靠模擬了。而且，使用css模擬游標可以讓它變粗變色。

下面說說粘貼是怎麼實現的。

按常理說，只有textarea，input這些，以及處於可編輯模式下的dom元素才會右鍵出現「粘貼」項。

然後我觀察了下，發現這些IDE使用了textarea，下面的三個步驟可以證明這一點：

1) 以上面第二個編輯器為例，打開Chrome控制台，輸入

document.getElementsByTagName("textarea")

控制台中會log出兩個&，滑鼠放在上面，你會發現，有一個textarea正好在你的游標位置。

2) 然後切換到Elements欄，定位到這個textarea。在編輯器中右鍵按下不放，你會發現在你按下右鍵的時候，這個textarea的z-index變為100000。

這是為了保證在滑鼠右鍵按下，菜單彈出之前，textarea能保持focus狀態，否則右鍵菜單中不會出現「粘貼」。而左鍵就不必要了，因為直接添加click事件發生時執行textarea.focus()就能保證textarea處於聚焦狀態。

3) 給textarea綁定focus和blur事件可以發現，輸入文字以及ctrl+V時，textarea是一直處於聚焦狀態的。

所以很明顯了，這個在線IDE輸入代碼是在一個隱藏textarea中進行的。然後就是把用戶輸入到textarea中的內容取出，再用正則之類的分析格式，加標籤等等，貌似題主的問題不在這方面。

另外，出於安全原因，現在的瀏覽器只能由用戶主動粘貼，javascript是沒法直接訪問剪切板內容的。

比較啰嗦。

Coding WebIDE 開啟雲端開發模式！

Docker在Coding WebIDE項目中的運用

WEB在線編譯器簡單的說就是把代碼傳到伺服器去編譯運行，結果返回來。

問的時怎樣實現的,你們扯東扯西的也是夠了

document.getElementsByTagName("textarea")

你可以看看這個：CodeMirror

其作者 Marijn Haverbeke 曾經寫過怎樣實現這個代碼編輯器的文章，可惜已經找不到了。

編輯器大多是在一個 div中，通過設置樣式完成。要對空格、&<、&>等做轉義。