Div Contenteditable="true"

Okay!... I'm facing this for hours now... html

​ jQu

Solution 1:

It'd be easiest to use phpjs.org's nl2br function: http://phpjs.org/functions/nl2br:480

---

EDIT (fully working -- tested)

I tested this on your fiddle and it worked:

$('div').keyup(function(){
    $('textarea').val( $(this).html().replace( /<br>/g, '\n' ) );
   //$('textarea').val($(this).html()) // also not working as expected
});
$('textarea').keyup(function(){
    $('div').html( nl2br( $(this).val(), 0 ) )
});

functionnl2br (str, is_xhtml) {
    // Converts newlines to HTML line breaks  //// version: 1004.2314// discuss at: http://phpjs.org/functions/nl2br    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)// +   improved by: Philip Peterson// +   improved by: Onno Marsman// +   improved by: Atli Þór// +   bugfixed by: Onno Marsman    // +      input by: Brett Zamir (http://brett-zamir.me)// +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)// +   improved by: Brett Zamir (http://brett-zamir.me)// +   improved by: Maximusya// *     example 1: nl2br('Kevin\nvan\nZonneveld');    // *     returns 1: 'Kevin\nvan\nZonneveld'// *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);// *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'// *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);// *     returns 3: '\nOne\nTwo\n\nThree\n'    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>';

    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

Solution 2:

This code works in Firefox:

$(document).ready(function(){ 
  $('div').keydown(function(){
    $('textarea').val($(this).html().replace(/<br>/g,"\n"));
  });

  $('textarea').keydown(function(){
    $('div').html($(this).val().replace(/\n/g,"<br>"));
  })
});

Then, if you're using Opera, the browser makes line breaks as <p>....</p>. IE, which Reigel probably use, probably adds those <div>...</div> tags. Seems there's no real standard way on how to handle line breaks when the DIV tag is contenteditable.

Solution 3:

You can do two things: You can use the nobr tag You can also add the style attribute:

<divstyle="display:inline;"></div>

Solution 4:

try taking a look at this question perhaps? slightly different situation as he's trying to communicate to the server, but i think the answer should be similar.

this code was previously posted by Gert G, but it seems to have disappeared. the code below seems to work flawlessly, so rep to Gert G on this one.

  $('div').keydown(function(){
    $('textarea').val($(this).html());
  });

  $('textarea').keydown(function(){
    $('div').html($(this).val().replace(/\n/g,"<br />"));
  })

Solution 5:

I think must be like this:

$('div').keyup(function(e){ 
   $('textarea').val($(this).text().replace('<br>',/\r\n/ig)); 
}); 
$('textarea').keyup(function(e){ 
        $('div').html($(this).val().replace(/\r\n/ig, '<br>')); 
});