Question

使用＆lt; p＆gt;换行文字如果该文本没有用＆lt; p＆gt;换行，则标记标记而不会丢失光标位置。

例如：
如果我输入＆＃34;这是一个段落..＆＃34;应转换为＆＃34;＆lt; p＆gt;这是段落＆lt; p＆gt;＆＃34;键入时，光标位置不应改变。光标应位于＆＃34;段落＃34;的末尾。如果我开始输入，文字应该在＆＃34;段落＃34;。

之后继续

This is a paragrapgh
<h1>header1</h1>
new paragraph

预期的hmtl：

<p>This is a paragrapgh</p>
<h1>header</h1>
<p>new paragrapgh</p>

我的代码：

var timeoutReference;
timeoutReference = void 0;
$("#edited_content.publitory").keyup(function(e) {
  var code;
  code = (e.keyCode ? e.keyCode : e.which);
  if (code === 13) {
    $("#edited_content.publitory").contents().filter(function() {
      return this.nodeType === 3 && $.trim(this.nodeValue).length;
    }).wrap("<p />");
  } else {
    if (timeoutReference) {
      clearTimeout(timeoutReference);
    }
    timeoutReference = setTimeout(function() {
      var content;
      content = $("#edited_content.publitory").contents().filter(function() {
        return this.nodeType === Node.TEXT_NODE;
      }).text();
      $('<p>').text(content);            
      $("#edited_content.publitory").find('div:not([class])').contents().unwrap().wrap('<p/>');
    }, 1000);
  }
});

在我的代码中，我使用＆lt; p＆gt;包装文本停止输入一秒后标记。我想在开始输入时将其换行。

Answer 1

也许，你只想要：

DEMO

$('div[contenteditable]').on('blur', function(){
    $(this).contents().filter(function(){
        return this.nodeType === 3;
    }).wrap('<p/>');
});

或者像这样剥去任何额外的空格：

DEMO

$('div[contenteditable]').on('blur', function(){
    $(this).contents().filter(function(){
        return this.nodeType === 3;
    }).replaceWith(function(){
        return '<p>' + $.trim(this.nodeValue) + '</p>';
    });
});

Answer 2

$('input').keydown(function() {
   $('.result').html('<p>' + $(this).val() + '</p>')
})

在jquery </p>中键入文本时用<p>标记包装文本

2 个答案:

DEMO

DEMO