contenteditable 삽입 된 범위 바깥쪽에 캐럿 놓기

Question

http://jsfiddle.net/VzbYJ/86/

이 링크를 한번 보시기 바랍니다. 그것이 지워지면 캐럿 장소에 스팬 노드를 삽입 할 것입니다. 문제는 노드를 삽입 한 후 노드를 누르면 해당 색상도 녹색입니다. 도 span 요소 내부로 들어 오기 때문에 그러면 span 뒤에 캐럿을 넣으면 다음 삽입 된 노드의 색이 정상으로 유지됩니다.

캐럿 위치에 따라 선택한 노드를 찾으려고 시도하고 요소 다음에 범위를 설정하고 접음 (false)을 사용했습니다. 그러나 나는 원하는 출력을 얻을 수 없었다.

노드를 찾기위한 코드 :

function findNode(event) 
    { 
    if (event.type == 'click') 
    par = event.target; 

    else if (event.type == 'keyup'){   
     if (document.selection) 
     par = document.selection.createRange().parentElement(); 
    else if (window.getSelection){ 
     var range = window.getSelection().getRangeAt(0); 
     par = range.commonAncestorContainer.parentNode; 
    } 
    } 

을하고 다음 나는() 개미 붕괴 (false)를 setEndAfter를 사용하여 경계를 설정합니다. 나는이 분야에서 새롭기 때문에 나는 무엇이 옳다는 것을 확신하지 못한다. 그래서 어떤 제안이라도 대단히 중요합니다. 미리 감사드립니다.

Answer 1

이 바로 페이지의 "관련"섹션을 간략하게 살펴보면 필요한 모든 정보에 대한 링크를 제공합니다. 요약하면 브라우저가 Firefox를 사용하지 못하는 경우이를 방지하고 가장 쉬운 해결 방법은 삽입 된 <span> 요소 뒤에 너비가 0 인 공백 문자 (유니 코드 U+200B)를 삽입하는 것입니다. 매우 못생긴 해킹 일뿐만 아니라 더 이상 필요치 않은 영백 스페이스를 추적하고 제거하는 문제가 있습니다.

내가 당신 jsFiddle 제로 폭 공간을 제거하기 위해이 방법을 사용하지만 코드없이 업데이트했습니다

: 배경에 대한

http://jsfiddle.net/VzbYJ/87/

을 여기에 관련 질문/답변 목록입니다

• Setting the caret position to an empty node inside a contentEditable element
• https://stackoverflow.com/a/15814297/96100
• Placing caret outside of inserted tag in ContentEditable

Setting the caret position to an empty node inside a contentEditable element

나는 이것에 대한 주식 대답을해야합니다, 그것은 이것은 이전 게시물이며,이 문제에 대한 해결책의 일부입니다 ... 자주

Answer 2

을 온다. 더 복잡한 접근 방식이 있지만 아직 끝나지 않았습니다. 단순하지만 언제나 좋습니다.

const editor = document.querySelector('[contenteditable="true"]'); 
const spans = document.querySelectorAll('span[contenteditable="false"]'); 

Array.prototype.slice.call(spans).map(span => { 
    const empty = document.createTextNode('\uFEFF'); 
    const parentEl = span.parentElement; 
    const allchildnodes = editor.childNodes; 
    const lastsib = allchildnodes[allchildnodes.length - 1]; 
    const ended = lastsib.wholeText === '\n'; 
    const prevsib = ended ? lastsib.previousSibling === span : false; 
    if (prevsib) { 
    parentEl.appendChild(empty); 
    } 
}); 

https://codepen.io/augur/pen/MvaKJO