js contenteditable - 새로 삽입 된 요소에 쓰지 못하도록합니다.

Question

DOM 요소가있는 텍스트를 클래스로 바꾸는 간단한 구문 형광펜 작업을하고 있습니다. |

말은, 나는

<div contenteditable="true"> 
    Some text. | And some other text. 
</div> 

이 커서는에있다 파이프

// 사용자가 입력하는 경우 사용자가 입력하고 나는 그것이 다음 삽입 요소

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foo</span>| And some other text. 
</div> 

후 선택을 설정하지만, 대신, 당신은에 foo

<div contenteditable="true"> 
    Some text. foo| And some other text. 
</div> 

을 입력 // 경우 아무 상관 없어.

// 타입 바

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foobar|</span> And some other text. 
</div> 

내가 그 싶지 않아,하지만 난 바로 새로 삽입 된 요소 뒤에 선택을 설정할 수 없습니다.

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foo</span>bar| And some other text. 
</div> 

여기 강조 및 교체를 수행하는 JS ..

... 
// chunk is the variable that holds foo, if we stick the the above example.. 
// select it 
range.setStart(range.startContainer, range.startOffset-chunk.length); 

// add it to the range 
sel.addRange(range); 

// replace it..then set the range to the textNode after the span 
// because after the injection selection.anchorNode is the textNode inside the span.. 
// in chrome, however, this below sets the range correctly. 
range.setStart(sel.anchorNode.parentNode.nextSibling, 0); 

// and it's all good until now, but adding the range to the selection does nothing.. 
sel.removeAllRanges(); 
sel.addRange(range) 

// the selection is still inside the span.. 

어떻게 그것을 해결할 수있어? o 나는 그것에 관해 많은 것을 읽었는데 여기에도 상당한 양의 질문을 보았지만이 특별한 문제에 대해서는 아무것도 보지 못했습니다.

Answer 1

WebKit에서 테스트 중이라고 가정합니다. WebKit의 캐럿 처리는 텍스트 노드 시작 부분에 캐럿을 배치하지 못하도록합니다 (https://bugs.webkit.org/show_bug.cgi?id=23189). Firefox에서는 코드가 잘되어야합니다.

해결 방법은 모두 끔찍합니다. 하나는 너비가 0 인 공백 (예 : \u200B)을 삽입하고 선택하는 것이지만 특수 문자를 추가하여 화살표 키를 처리하고 코드를 사용하여 너비가 0 인 공백을 제거합니다.

업데이트

또 다른 해결 방법은 웹킷이 링크 후 갈 수있는 caret를 강제 링크에 대한 특별한 경우를 가지고 있다는 사실을 사용하는 것입니다

http://jsfiddle.net/RfMju/

그래서 당신이 할 수 do는 불쾌하지만 실행 가능하지만 캐럿을 강조 표시된 요소 내부로 이동하여 링크로 변경하려는 경우 <span>을 사용합니다.