CODEWITHSUNDEEP
javascripthtml
Hiro
Hiro

Reputation: 47

How to wrap with <p> in first line of contenteditable div

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>

Upvotes: 2

Views: 2316

Answers (3)

Gatsbill
Gatsbill

Reputation: 1790

One way to do it is to get first text node of your div, save the text, remove that node and then create a p 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);
    }
}

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

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">

Upvotes: 0

evolutionxbox
evolutionxbox

Reputation: 4122

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

Upvotes: 1

Related Questions