div contenteditable="true"

Question

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

html

<div contenteditable="true" style="width: 509px; "></div>

<textarea cols="50" rows="10"></textarea>
​

jQuery

$('div').keyup(function(){
    $('textarea').val($(this).text());
});
$('textarea').keyup(function(){
    $('div').html($(this).val());
})​;​

I want it that whatever I type in the <div>, would look as is in the <textarea> and vice versa... but I'm stuck... please see my Fiddle for what I mean...

for the reason is that, I'm using <div> as a replacement for <textarea>... because <div>'s scrollbar is easy to customize than of the <textarea>... but if you can see, contenteditable div would include another div when you press enter...

edit what's happening is,

in the div,

I
am
crazy.
but
your
way
of
coding
is
worst.

but in textarea, using .html() in div

I<div>am</div><div>crazy.</div><div>but</div><div>your</div><div>way</div><div>of</div><div>coding</div><div>is</div><div>worst.</div>

.text() is like this

I am crazy. but your way of coding is worst.

and really, I don't want that...

Answer 1

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.

Answer 2

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 ) )
});

function nl2br (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');
}

Answer 3

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 />"));
  })

Answer 4

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>')); 
});