創建文本編輯器一樣使用jQuery和CSS，HTML

Question

我只是想知道如果有這樣的事情是可能的/可用或行號不

對於我的HTML頁每一行我要顯示在極端的行號左邊的頁面與許多編程編輯器類似。 你知道任何這樣的插件或設計滿足這個嗎？

Answer 1

下面是我炮製爲簡單起見東西粗糙，歡迎您就可以擴大：

http://jsfiddle.net/L4MEu/2/

HTML：

<div id="linenum"></div> 
<div id="content"> 
    test<br/> 
    one<br> 
    two 

</div>​ 

CSS：

#linenum 
{ 
    width: 5%; 
    background-color: blue; 
    color: #FFF; 
    position: absolute; 
    top: 0px; 
    bottom: 0px;    
} 
#content 
{ 
    position: relative; 
    left: 7%; 
} 
body 
{ 
    overflow-x: hidden; 
} 

JQuery：

$(document).ready(function(){ 
     var splitCondition = new RegExp("<br/?>"); 
     var lines = $("#content").html().split(splitCondition); 

     for(var i = 1; i <= lines.length; i++) 
     { 
     $("#linenum").append("&nbsp;" + i + ".<br/>"); 
     } 
​ 
});