Retain newline when getting contenteditable div text

Question

I wanted to save the text inside a contenteditable div being pre formatted. How would i get the pre form of the text and not the text where \n and \r are ommitted?

$('#save').click(function(e) {
    var id = "board_code";
    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");

        alert( ce.text() );
});

http://jsfiddle.net/AD5q7/10/ this doesnt work

try string for contenteditable div

UPDATE: try the string by typing it. There maybe no problem when the string is pasted.

1

abc def

    gh  i

jkl

2

#include<iostream.h>
#include<conio.h>

int main(){
    int grade, passingMark=75;

    cout<<"Hi there, please enter your mark: ";
    cin>>grade;

    if( ((grade >= passingMark)||(grade==35)) && (grade<101)){
        cout<<"\nPass!";
    }

    return 0;//15lines
}

The save file must be also formatted like this and not without \n\r removed. Im expecting that the alert should include \n

Sorry I'm not sure that I understand completely. Can I get an example of what your putting into the div. Whats being alerted. And then what you want to see alerted instead. — Trevor, Oct 05 '13 at 14:09
try the first string. the alert should also include the newlines and not with \n removed — extraRice, Oct 05 '13 at 14:24
Try your fiddle, but add a `min-height:100px;` to the div's css, to make it visible. Then paste your strings "browser-side" (the bottom-right section of the fiddle), hit 'save' and see it work. — geomagas, Oct 05 '13 at 14:46
@geomagas: true it does onPaste. But typing it give me the newline omitted alert — extraRice, Oct 05 '13 at 14:52
This is new for me too, so from my side, +1 for asking. Ontopic: What bothers me is this: `(Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)` taken from http://api.jquery.com/text/. So could it be a browser issue? I stand intrigued... — geomagas, Oct 05 '13 at 15:04
One thing is for sure though: When you type, you insert _text_. When you paste html-copied content, _html_ is inserted. That's expected, as well as .text() converting html to text properly. So if you manage to convert the div's contents to html on the fly as the user types, I think you're off the hook (several js editors do it, but I have no experience). — geomagas, Oct 05 '13 at 15:08
`contenteditable` will produce HTML, complete with HTML line breaks and possibly without unnecessary whitespace. If you want plain text, you should be using a plain-old `textarea` rather than some fancy element with `contenteditable` applied. — icktoofay, Oct 06 '13 at 03:50
I can see uses for this... syntax highlighting springs to mind. So +1 for trying. Not sure I like the browser detection though. That shouldn't be necessary. But I really can't reproduce the issue. No matter if I paste or type, I do get the newlines back in the alert. So am I doing something wrong? (I did have to alter the fiddle slightly to use a jQuery version that supported `.browser`.) — Mr Lister, Oct 06 '13 at 08:22

score 0 · Answer 1 · edited May 23 '17 at 12:24

When contenteaditable div looses focus, the entire text gets converted to html for eg

<div contenteditable="true">Your text is here
and has new line </div>

upon loosing focus it converts the virtual textarea to html i.e.

<div>Your text is here</div><br><div>and has new line </div>

and when you'll attempt .text(), you'll loose the desired alignment as actually the don't exist anymore in that div.

Solution 1. You can use textarea, with border properties set to 0 which would make it look like a contenteditable div or 2. You can grab the entire html of the contenteditable div and replace the html with the corresponding text representations using javascript (for that refer javascript regex replace html chars)

score -2 · Answer 2 · answered Oct 09 '13 at 17:22

-2

Try this

alert( ce.text().replace(/\n/g, "\\n" ).replace(/\r/g, "\\r"));

answered Oct 09 '13 at 17:22

Safeer Hussain

1,230
1
15
27

Retain newline when getting contenteditable div text

2 Answers2