Как инициализировать и настроить структуру узла в contenteditable div

Question

Этот вопрос будет состоять из двух частей.

1. Я хотел бы создать contenteditable DIV, когда return вводится новый элемент будет <p>. Я разыскал один раствор для определения document.execCommand('defaultParagraphSeparator', false, 'p');

   Это прекрасно работает, но проблема в том, когда ДИВ инициализируется, самая первая строка не будет окружена <p>. Это будет что-то вроде

   <div contenteditable=true> 
       "hello" 
       <p>new line here</p> 
   </div> 
   

Я пытался поставить <p> тег в HTML, но это не похоже на работу.

2. Основанный на вышеуказанном вопросе, можно получить больше, а не просто создавать новые <p> для каждой новой строки. Могу ли я создать <p><span</span></p> для каждой строки, и текст ввода будет вставлен в <span>?

Answer 1

это работает для хрома и светлячок

document.execCommand('defaultParagraphSeparator', false, 'p'); 
    $('div[contenteditable="true"]').one('focus',function(){ 
    var selection=document.getSelection(); 
    var range=document.createRange(); 
    $(this).append("<p>&#8203;</p>"); 
    var insertedElement=$(this).find('p'); 
    range.setStart(insertedElement[0].firstChild,1); 
    selection.removeAllRanges(); 
    selection.addRange(range); 
    });