태그가있는 contenteditable 캐럿이 Microsoft Edge의 각 태그 뒤에 오는 이유는 무엇입니까?

Question

나는 어디에서나 편집 할 수 있어야하는 angular2 + 용 contenteditable 구성 요소를 생성 중입니다. 어디서나 나는 태그의 시작, 태그와 태그의 끝 (실제 태그 텍스트가 아닌)을 의미합니다. 다음은 API에서 미리로드 된 데이터가있는 코드입니다.

<div id="txt" contenteditable="true"> 
    <span id="annyoing-html" contenteditable="false"> 
    <span class="badge">I AM ANNOYING</span> 
    </span> 
    <span id="annyoing-html" contenteditable="false"> 
    <span class="badge">I AM ANNOYING TOO</span> 
    </span> 
</div> 

전체 데모 코드 :

https://jsfiddle.net/9kqkbuvr/5/

이 작동하는 방법을 참조 크롬이나 오페라와 함께 엽니 다.

Answer 1

음 ... 여백은 공백이 아닙니다 ... 선택할 수 없어야합니다 ... 어떤 해석이 올바른지 확실하지 않습니다. 해결 방법은 두 개의 편집 할 수없는 범위 사이에 공백을 넣는 것입니다.

<div id="txt" contenteditable="true"> 
    <span id="annyoing-html" contenteditable="false"> 
    <span class="badge">I AM ANNOYING</span> 
    </span>&nbsp; 
    <span id="annyoing-html" contenteditable="false"> 
    <span class="badge">I AM ANNOYING TOO</span> 
    </span> 
</div>