2

I am trying to get the formatted text from a contenteditable='true' div to send to my server.

I used to use a textarea and when you get the value of a textarea it preserves white space and line breaks, but when using a contenteditable div even when using styles such as the following I can not get the properly formatted text:

white-space: pre-wrap;
word-wrap: break-word;

For example if I type this into my div:

"a
 aa

asdf"

I will get this out with textContent: 

"a aaasdf"

Is there any way to get formatted text out of a contenteditable div like a textarea?

Derek
  • 560
  • 6
  • 19

4 Answers4

6

Use .innerHTML to get the linebreaks too.

Readup: .innerHTML | MDN

Working Code Snippet:

document.getElementById('copy').addEventListener('click', function(){
  var text = document.getElementById('input').innerHTML;
  document.getElementById('output').innerHTML = text;
});
div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}
<div contenteditable='true' id="input">Enter something funny<br>;)</div>

<button id="copy">Copy Text</button>

<div id="output">Text will be copied here.</div>
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • 1
    .innerHTML returns all inner html with < br > and so no ... Instead need use .innerText – Oleksandr T. Dec 16 '14 at 06:49
  • Yes this works great in chrome but innerText doesn't work in firefox. Do you know a cross browser solution? – Derek Dec 16 '14 at 09:26
  • @Derek Use `.innerHTML` itself. Works in Firefox, Chrome and IE too. Answer updated. – Rahul Desai Dec 16 '14 at 11:50
  • @Alexander I dont think `innerHTML` fetching `
    ` will be a problem. OP wants the `formatted` text.     – Rahul Desai Dec 16 '14 at 11:53
  • @Derek cross browser solution var text = element.innerText || element.textContent; – Oleksandr T. Dec 16 '14 at 11:58
  • @Alexander this doesn't work because textContent does not get the formatted text, it just concatenates the contents of the child elements – Derek Dec 16 '14 at 20:34
  • I found a cross browser alternative to innerText : [http://stackoverflow.com/questions/3813167/what-is-the-most-convenient-way-to-convert-html-to-plain-text-while-preserving-l] – Derek Dec 16 '14 at 21:04
2

Example from: Extracting text from a contentEditable div

function getContentEditableText(id) {
    var ce = $("<pre />").html($("#" + id).html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
}

Or:

$.fn.getPreText = function () {
    var ce = $("<pre />").html(this.html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
};

This require jQuery, though.

Community
  • 1
  • 1
Joe Doe
  • 61
  • 4
1

When you enter content into a contenteditable element, this auto-generates HTML nodes within the target element.so you need to access its .innerHTML property and treat the content as HTML, not plain text

You can access this HTML content using the .innerHTML property, or you can use .innerText, which returns plain text but preserves the formatting as shown in @Rahul Desai's answer and in this blog post:

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};
<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

If I enter

Hello
how

are you

into that div and then click the button, the console shows:

<p>Hello</p><p>how</p><p><br></p><p>are you</p>
JLRishe
  • 99,490
  • 19
  • 131
  • 169
0

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};
<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />
Great Efue
  • 90
  • 5