jQuery的行數的代碼編輯器

Question

我試着去做到這一點：

http://jsfiddle.net/WkVb9/

但是，而不是使用文本區域，使用iframe與designmode = 'on'

http://jsfiddle.net/ysgEf/

它似乎並沒有工作=/

Answer 1

Have a look at this piece of code:

var editable = $(document.getElementById('edit').contentWindow.document); 

editable.attr('designMode', "on").keyup(function(){ 
    var length = $(this).find('body').children('br, p, div').length; 

    if($(this).find('body').html().length && !length){ 
     length = 1; 
    } 

    $('#lc').text(length); 
}); 

下面是測試的各種瀏覽器的行爲：

• 火狐3.6：<br />標籤附加到形成換行符。在開始時，沒有<br />，而在第一個換行符之後，在當前光標位置之前添加一個，而在
之間添加一個
• Chrome：<div>用於包含每一行。 <br />用於空行。第一行不包裝
• IE 8兼容性：<p>用於包含每一行。

課程：請勿使用contentEditable或designMode！這種行爲是非常不一致的，對於這種情況來說毫無用處。當然你可以用黑客來解決這個問題，但是當新的瀏覽器出來時會發生什麼？你必須保持這種狀態直到時間結束！

Answer 2

這是一個很好的開始：http://jsfiddle.net/ysgEf/3/

它返回錯誤的行號，但代碼正在工作，現在比沒有好。

知道了這一點：跨瀏覽器的實現是不同的！從iframe的內容中查找行號不是一項簡單的任務！

** 編輯 **

基於Yi Jiang的回答是：

var editable = $(document.getElementById('edit').contentWindow.document) 
    .find('body').css({'overflow':'auto', 'white-space':'nowrap'}).end(); 

editable.attr('designMode', "on").keyup(function(){ 
    var length = $(this).find('body')[0].childNodes.length; 

    $('#lc').text(length); 
});​ 

這也算個文本節點，而不是JQuery的返回。並且也不會包裝周圍的線條。