如何包装 <p> 在第一线的contenteditable div

Question

I used below code to wrap <p> instead of <div> .

document.execCommand('defaultParagraphSeparator', false, 'p')

But I still can't wrap first line, like this "aaa".

<div id=“body-text” class=“body-text” contenteditable=“true” data-placeholder=“Body Contents">
    aaa
    <p>bbb</p>
    <p>ccc</p>
</div>

Does anyone know how to wrap first line "aaa" with <p> ?

postscript

I changed my cord using one of the answer for reference. But now I cant type any letter. Only if I press enter first, it works. But after I press enter and make <p> , I cant type any letter again.

Where is the problem?

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents' onkeydown={firstLine}></div>
<script>
firstLine(e) {
    if(e.keyCode == '13') {
        var div = document.getElementById('body-text')
        var text = div.firstChild.textContents
        div.removeChild(div.firstChild)
        var p = document.createElement('p')
        p.textContent = text
        div.insertBefore(p, div.firstChild)
    }
}
</script>

Answer 1

One way to do it is to get first text node of your div, save the text, remove that node and then create ap tag with the text from your ancient node and insert it in your div.

UPDATED

you had a little typpo problem var text = div.firstChild.textContents , there is no s it only var text = div.firstChild.textContent

see fiddle: https://jsfiddle.net/2rgLzkyj/

HTML :

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'>
  aaa
  <p>bbb</p>
</div>

Javascript:

var div = document.getElementById('body-text')

div.addEventListener('keydown', onKeyDown);

function onKeyDown(e) {
    if (e.keyCode == '13') {
        var text = div.firstChild.textContent;
        div.removeChild(div.firstChild);
        var p = document.createElement('p');
        p.textContent = text;
        div.insertBefore(p, div.firstChild);
    }
}

Answer 2

I'm using element.firstChild to select the "aaa" textNode, and creating the paragraph element which then gets prepended back into .body-text .

 var pElement = document.createElement('p'); var bodyText = document.querySelector('.body-text'); var firstLine = bodyText.firstChild; pElement.appendChild(firstLine); bodyText.prepend(pElement); console.log(bodyText.outerHTML) 

 <div class="body-text" contenteditable="true" data-placeholder="Body Contents"> aaa <p>bbb</p> <p>ccc</p> </div> 

note: you don't need a class and an ID... choose one

Answer 3

Ok, first I have to let you know that the code you provided was using those fancy quotes “ and ” you must use either this " or this ' . Having said that, I have made a Snippet that uses formatBlock .

1. Highlight the text and click the button <p/> .
2. It can wrap text in a <p> , <div> , <blockquote> , <h1> , etc..

SNIPPET

 <div id="body-text" class="body-text" contenteditable="true" data-placeholder="Body Contents"> aaa <p>bbb</p> <p>ccc</p> </div> <input type="button" class="p" onclick="document.execCommand('formatBlock', false, 'p')" value="<p/>" title="Insert a Paragraph Wrapped on Highlighted Text">