CODEWITHSUNDEEP
jqueryhtml
Reigel Gallarde
Reigel Gallarde

Reputation: 65254

div contenteditable="true"

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

Upvotes: 5

Views: 20545

Answers (5)

Supermath101
Supermath101

Reputation: 427

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

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

Upvotes: 1

Gert Grenander
Gert Grenander

Reputation: 17084

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.

Upvotes: 1

Kerry Jones
Kerry Jones

Reputation: 21838

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

Upvotes: 4

guaike
guaike

Reputation: 2491

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

Upvotes: 0

nathan gonzalez
nathan gonzalez

Reputation: 11987

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

Upvotes: 0

Related Questions