Javascript - contenteditable split 요소와 부모의 반쪽

Question

저는 마이크로 wysiwyg 편집기에서 작업 중입니다.

그래서 같이 편집기의 내용이 보이는 말할 수 있습니다 : 나는 다음을 수행 할 수 있어야합니다

<p>This is 
    <strong>some content 
     <span>and more</span> 
    </strong> 
</p> 

내가 and more의 공간에 커서를 놓고 버튼을 클릭하면, 내가 원하는 다음과 같이 분할 할 HTML :

<p>This is 
    <strong>some content 
     <span>and</span> 
    </strong> 
</p> 

** CURSOR IS HERE NOW ** 

<p> 
    <strong> 
     <span> more</span> 
    </strong> 
</p> 

어떻게하면 좋을까요? 나는 이미 클릭 된 요소의 앵커 노드를 가져올 수 있고 루트 부모를 얻는 방법을 가지고 있지만 위와 같이 요소를 분할하는 방법에 대해서는 알지 못합니다.

Answer 1

p 요소를 커서 위치에 간단히 추가 한 다음 즉시 제거 할 수 있습니다. 편집 가능한 컨텐츠의 자동화는 가능한 분할 된 서식 (또는 어느 때의 태그)을 처리하고 생성 된 HTML이 유효합니다. 그래서 같이 :

var but = document.getElementById('splitBut'); 
 
    but.addEventListener('click', function() { 
 
    \t var temp; 
 
    \t document.execCommand('insertHTML', false, '<p id="temp"></p>'); 
 
     temp = document.getElementById('temp'); 
 
     temp.parentElement.removeChild(temp); 
 
    });

<button id="splitBut">Split</button> 
 
<div id="pad" contenteditable> 
 
    <p>This is 
 
     <strong>some content 
 
     <span>and more</span> 
 
    </strong> 
 
    </p> 
 
</div>

A live demo at jsFiddle.

이 코드는 Internet Explorer의 모든 버전에서 작동하지 않습니다 (Edge에서 작동 함). 또한 제작 된 HTML은 사용 된 브라우저에 따라 다를 수 있습니다.

---

편집

크롬은 HTML 삽입 문제를 갖고있는 것 같아요. 삽입 된 요소는 비어 있어야합니다. 요소를 삭제하면 Chrome에서 br 요소를 추가하고 contenteditable을 잘못 렌더링합니다 (Inconsistencies list에 추가 할 후보자는 document.execCommand입니까?). Unfortenately 나는 이것을 고칠 수 없었고, 대답은 FireFox 또는 Edge에서 실행될 때만 유용합니다.