사전 태그 집합에 편집 불가능한 줄 번호 구현

Question

편집 가능한 pre 태그 그룹이 필요합니다. 각 태그는 텍스트 줄을 나타냅니다. 줄은 줄 번호 (편집 불가능)로 시작한 다음 편집 가능해야합니다. 내가 <span contentEditable="false">1 </span><pre contentEditable="true"></pre>을 입력하면 span은 편집 할 수없고 pre은 편집 가능하지만 pre은 다음 줄에 있습니다.

span가 pre (<pre contentEditable="true"><span contentEditable="false">1 </span></pre>) 내에 그래서 그것을 변경하는 경우

는 전체 것은 편집, 그리고 하나는 들여 쓰기를 이상한 탭 라인의 중앙에 표시됩니다.

라인 번호는 pre 라인의 시작 부분에서 어떻게 얻을 수 있습니까?

Answer 1

자바 스크립트가없는 간단한 코드 편집기.

http://jsfiddle.net/oswaldoacauan/tpY4Y/