Как создать элемент в первом contenteditable

Question

В принципе мне нужно создать элемент абзаца в первом элементе contentEditable.

<div id="contentEdit" contenteditable="true"> 
    <p> 
     <figure id="figure" contenteditable="false"> 
      <figcaption class="_picCaption" contentEditable="true"> 
       image caption 
      </figcaption> 
     </figure> 
    </p> 
</div> 

Что мне нужно сделать это, когда финишная пользователь редактировать подпись, чтобы создать пункт элемент «contentEdit», который является первым Div. Любые идеи?

$(document).on("keydown", "#contentEdit", function(e) { 
    e.stopPropagation(); 
    var element = cp_getSelectionBoundaryElement(true); 

    if ((e.which || e.keyCode) == 13) { 
     if (element.tagName == "FIGCAPTION") { 
      e.preventDefault(); 
      // get the selection range (or cursor  position) 
      var range = window.getSelection().getRangeAt(0); 

      // create a p 
      var newElement = document.createElement('p'); 
      newElement.className = '_graf_p'; 

      // if the range is in #contentEdit 
      if (range.startContainer.parentNode.className === '_picCaption') { 
       // delete whatever is on the range 
       range.deleteContents(); 

       // place your p 
       range.insertNode(newElement); 
      } 
     } 
    } 
}); 

Что происходит, я создаю элемент p внутри заголовка. Я не знаю, как получить диапазон бабушки и дедушки figcaption.

Answer 1

Вам не обязательно использовать диапазон, вам просто нужно обернуть все элементы внутри #contentEdit с помощью элемента p.

Используя простые JS, вы должны переместить все элементы внутри #contentEdit к новому p элемента, а затем положить его обратно в #contentEdit:

var content = document.getElementById('contentEdit'); 
var newElement = document.createElement('p'); 

while (content.firstChild) { 
    newElement.appendChild(content.firstChild); 
} 

content.appendChild(newElement);