Javascript - contenteditable split element и родители пополам

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> 

Как бы я это сделал? Я уже могу получить привязывающий узел элемента clicked и получить метод для получения родительского корня, но не знаю, как подойти к разделению элементов, как показано выше.

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 может отличаться в зависимости от используемого браузера.

---

Редактировать

Chrome, кажется, есть проблемы с вставкой HTML. Вставляемый элемент должен быть пустым. После удаления элемента Chrome добавляет элемент br и неправильно отображает контент (кандидат для добавления в Inconsistencies list из document.execCommand?). К сожалению, я не мог это исправить, и ответ полезен только при запуске в FireFox или Edge.