簡要揭祕在線代碼編輯器

前言

好像園裏沒啥帖子介紹在線代碼編輯器，網上也多少相關資料，我作在線代碼編輯器http://www.wcodei.com/的時候走了一堆的彎路，如今分享一下經驗吧，我記性不好，就只能想到哪兒寫到哪兒了，但願你們別介意。

 

一.所見即所得編輯器與代碼編輯器的技術對比

 

二者看上去貌似很類似，都不是傳統的editarea,都須要編輯器中顯示的內容可以支持帶顏色。

所見即所得編輯器的技術核心就是contenteditable="true"屬性，只要在一個html容器中使用該屬性，則該html容器就能變成一個簡單的編輯器，如今常見的一些所見即所得編輯器都是在這個技術的基礎上再加上一些控制編輯器內容的代碼而已。而代碼編輯器則不能採用該技術，由於這樣在編輯html代碼時會形成混淆。因此常見的在線代碼編輯器通常是弄一個隱藏的editarea來支持鍵盤輸入，將編輯的內容存儲在js對象中，而後再動態的建立html對象來展現着色的代碼。

這樣看來代碼編輯器相對於所見即所得編輯器來講，仍是更有難度一些的。

特別對我這種頁面佈局方面比較抓瞎的人來講，在線代碼編輯器無比的煩人。。。到如今都還有隱現的頁面展現bug。

 二.代碼編輯器的一些功能實現

1.光標

代碼編輯器須要本身實現光標的閃爍效果，這個很簡單，就是間隔一段時間顯示/隱藏div就行啦。

setInterval(function() {
        tCursor.toggle();
      }, 530);

固然光標的位置須要本身計算。

 

2.滾動條

滾動條實現的難易要看你想要怎樣的功能，若是你不須要行號，或者不須要固定行號，則用html對象自帶的滾動條就好了。

若是你和我同樣想實現固定位置的行號，這就麻煩一些，須要本身實現滾動條的效果，並本身用代碼來同步滾動條的狀態和頁面的scroll狀態。

 

3.着色

我的感受着色不是那麼複雜，主要就是把一些須要着色的東東找出來就好了。

 

4.拷貝，剪切等

實現這個比較複雜的一點是ie不支持直接訪問剪貼板，這樣就只能曲線救國了，先把要拷貝，剪切的內容放到editarea裏面，再弄到剪貼板裏去。

5.打開本地文件

其實我原本想實現一種比較酷炫的功能，本地文件直接拖動到編輯器打開，而後快捷鍵ctrl-s保存文件。不過到實現的時候卻發現拖動打開能夠，可是保存文件不行，由於我找了一圈都沒找到怎麼獲取被拖動打開文件的文件地址，就算用插件也貌似得不到。頂多獲得文件名，具體地址得不到！

因而我只能作成那種經過插件瀏覽個人電腦來一步步打開文件，並進行保存的方式了。

 

3、演示

我挺喜歡vs的在沒有選擇文本的時候用ctrl-x,ctrl-c會剪切複製當前行的功能

和ultraedit的列編輯模式(用ctrl-m切換)，因此在個人編輯器中也實現了這兩個功能。

另外這個版本由於要訪問本地文件，因此須要裝插件，囧！

http://www.wcodei.com/