Contenteditable - 모든 가능한 질문과 답변을 줄이면서 요소

Question

의 끝으로 캐럿의 텍스트를 추출합니다. 이렇게 해보겠습니다.

RTE를 프로그래밍하고 있지만 contenteditable 요소에서 텍스트를 성공적으로 추출하지 못했습니다. 각 브라우저는 노드와 키 누르기 (# 13) 이벤트를 약간 다르게 처리합니다 (예 : 'br', 다른 'div', 'p'등을 생성 함) 이 모든 일관성을 유지하기 위해 e.preventDefault()를 사용하여 모든 기본 액션을 죽이는 크로스 브라우저 편집기를 작성했습니다. 시나리오 다음

:

1) 사용자가 소자 뒤에 # 13 키 (확인)

2) 캐럿 위치 검출 (체크)

3) 새로운 P (aragraph를 만드는)를 히트 캐럿의 IN (선택)

4) (캐럿과 요소의 단부 사이의 텍스트 (노드 (들))를 추출하는 경우??)

5) 새롭게 생성하기 위해) (노드 (들)을 텍스트를 넣어 당신이 상상할 수 있듯이 P (aragraph) (체크)

는, 모든 점 4.

특정 선택이 추출되고있는 JS 잘 알려진 배회하는 라이브러리에서 비슷한 기능이있다를 제외하고 작동합니다.

내가 필요한 것은 다음과 같다. 캐럿부터 모든 텍스트 (물론 태그를 사용하여 splitBoundaries)를 가져 와서 contenteditable 단락 (p, h1, h2, ...) 요소 끝에 가져 와서 추출한다.

단서, 힌트 또는 스 니펫을 환영합니다! 미리 감사드립니다.

종류와 관련, 페이지 당신은 그것의 extractContents() 방법을 포함하는 블록 요소의 끝 캐럿에서 콘텐츠를 포괄하는 범위 객체를 생성 및 호출하여이 작업을 수행 할 수 있습니다

Answer 1

:

function getBlockContainer(node) { 
    while (node) { 
     // Example block elements below, you may want to add more 
     if (node.nodeType == 1 && /^(P|H[1-6]|DIV)$/i.test(node.nodeName)) { 
      return node; 
     } 
     node = node.parentNode; 
    } 
} 

function extractBlockContentsFromCaret() { 
    var sel = window.getSelection(); 
    if (sel.rangeCount) { 
     var selRange = sel.getRangeAt(0); 
     var blockEl = getBlockContainer(selRange.endContainer); 
     if (blockEl) { 
      var range = selRange.cloneRange(); 
      range.selectNodeContents(blockEl); 
      range.setStart(selRange.endContainer, selRange.endOffset); 
      return range.extractContents(); 
     } 
    } 
} 

을 Internet Explorer < = 8에서는 Range 또는 다른 브라우저와 동일한 선택 개체를 지원하지 않습니다. 당신은 (언급 한) Rangy을 사용하여 IE 지원을 제공 할 수 있습니다. window.getSelection()을 rangy.getSelection()으로 바꿉니다.

jsFiddle : http://jsfiddle.net/LwXvk/3/