div contenteditable=“真”

Question

好吧！..。我已经面对了好几个小时了..。

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

我想要的是，无论我输入什么，都会像中的一样，反之亦然.但我被困住了。我的意思是，请看我的信.

因为我用它来代替.因为滚动条比.更容易自定义，但是如果可以看到，当您按enter时，内容可编辑的div将包括另一个div。

编辑所发生的是，

在战场上，

我 上午 太疯狂了。 但 你的 道路 的 编码 是 最糟糕的。

但是在文本区域，在div中使用.html()

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()是这样的

我疯了。但你的编码方式很糟糕。

真的我不想那样..。

Answer 1

最容易使用phpjs.org的nl2br函数：http://phpjs.org/functions/nl2br:480

编辑(完全工作-测试)

我在你的小提琴上测试了这个，它起了作用：

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

此代码适用于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>"));
  })
});

然后，如果您使用的是Opera，浏览器会以<p>....</p>的形式进行换行。Reigel可能使用的IE可能添加了那些<div>...</div>标记。当DIV标记是可满足的时，似乎没有真正的标准方法来处理换行符。

Answer 3

你可以做两件事：

你可以使用势利标签

还可以添加样式属性：

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