즉시 편집 가능한 문자 교체하기

Question

나는 입력 된 문자 사이의 시간을 시각화하고자하는 약간의 실험용 편집기를 만들고 있습니다. 따라서 나는 자바 스크립트와 contenteditable div를 사용하여 모든 문자를 SPAN 및 타임 스탬프 속성으로 래핑합니다. 나는 rangy의 도움으로 약간의 기능을 구축 :

function insertAtCursor(char, timestamp) { 
    var sel = rangy.getSelection(); 
    var range = sel.rangeCount ? sel.getRangeAt(0) : null; 
    if (range) { 
     var el = document.createElement("span"); 
     $(el).attr('time', timestamp); 
     el.appendChild(document.createTextNode(char)); 
     range.insertNode(el); 
     range.setStartAfter(el); 
     rangy.getSelection().setSingleRange(range); 
    } 
} 

지금 내가 어떤 도움을 주셔서 감사합니다 것이 개념을 두 가지 문제에 직면하고 있습니다 :

을 수행합니다. 위의 함수를 사용하면 출력은 다음과 같이 중첩 된 범위로 끝납니다.

<span time="12345">a 
    <span time="12345">b 
    <span time="12345">c</span> 
    </span> 
</span> 

b. 위의 함수가 실행될 수 있다고하더라도 복사 & 붙여 넣기 또는 드래그 & 드롭 액션은 또한 일부 내포 된 범위에서 끝날 수 있습니다 ... 그리고 나는 그것을 피할 수있는 방법이 있는지 궁금합니다.

감사합니다, 안드레아스는

Answer 1

나는 텍스트가 커질 수있는 경우 특히, 전반적으로이에게 좋은 생각을 확신 아니에요. 개선의 몇 :

• time 아마 당신은 몇 가지 내용 (할 것 range.deleteContents() 추가)를 선택한 경우를 처리 할 필요가
• HTML5
로 data-time 유효성을 검사해야한다. 이 작업을 수행하려는 경우

그러나, 나는 커서가 기존 <span> 내부의 텍스트 노드의 끝에있는 경우 확인하고 텍스트 노드의 부모 후에 새로운 <span>를 추가 건의 할 것입니다. 이런 식으로 뭔가 :

라이브 데모 : http://jsfiddle.net/kWL82/1/

코드 :

function insertAtCursor(char, timestamp) { 
    var sel = rangy.getSelection(); 
    var range = sel.rangeCount ? sel.getRangeAt(0) : null; 
    var parent; 
    if (range) { 
     var el = document.createElement("span"); 
     $(el).attr('data-time', timestamp); 
     el.appendChild(document.createTextNode(char)); 

     // Check if the cursor is at the end of the text in an existing span 
     if (range.endContainer.nodeType == 3 
       && (parent = range.endContainer.parentNode) 
       && (parent.tagName == "SPAN")) { 
      range.setStartAfter(parent); 
     } 

     range.insertNode(el); 
     range.setStartAfter(el); 
     rangy.getSelection().setSingleRange(range); 
    } 
}