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

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