div contenteditable = "true"

Question

Ok! ... Je suis face à ce depuis des heures ...

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 Je veux que tout ce que je tape dans le < div>, ressemblerait tout comme dans le < textarea> et vice versa ... mais je suis coincé ... please see my Fiddle for what I mean...

pour la raison est que, j'utilise < div> pour remplacer < textarea> ... parce que < div> » s est scrollbar facile à personnaliser que des < textarea> ... mais si vous pouvez le voir, contenteditable div comprendrait un autre div lorsque vous appuyez sur Entrée ...

modifier ce qui se passe est,

dans le div,

I
am
folle.
mais
votre
manière
de
codant
est
pire.

mais textarea, en utilisant .html() dans 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() est comme ce

Je suis fou. mais votre façon de coder est pire.

et vraiment, je ne veux pas que ...

Answer 1

Il serait plus facile d'utiliser la fonction de nl2br phpjs.org: http://phpjs.org/functions/nl2br:480

---

EDIT (travail entièrement - testé)

Je l'ai testé cela sur votre violon et cela a fonctionné:

$('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

Ce code fonctionne dans 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>")); 
    }) 
}); 

Ensuite, si vous utilisez Opera, le navigateur fait des sauts de ligne comme <p>....</p>. IE, que Reigel utilise probablement, ajoute probablement ces tags <div>...</div>. Il semble qu'il n'y ait pas vraiment de moyen standard pour gérer les sauts de ligne lorsque la balise DIV est contentable.

Answer 3

essayez peut-être de regarder this question peut-être?situation légèrement différente car il essaie de communiquer avec le serveur, mais je pense que la réponse devrait être similaire.

Ce code a été précédemment posté par Gert G, mais il semble avoir disparu. le code ci-dessous semble fonctionner parfaitement, alors rep pour Gert G sur celui-ci.

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

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

Answer 4

Je pense que doit être comme ceci:

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

Answer 5

Vous pouvez faire deux choses:
Vous pouvez utiliser la balise nobr
Vous pouvez également ajouter l'attribut style:

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