在contenteditable div中添加文本周围的p标签

Question

使用下面的代码，我可以成功地在contenteditable div中输入文本，并且在按下回车键时，它不会创建新的div，而是创建<br>。如何在contentedtiable div内的文本周围添加<p>标签？

$('button').click(function() {
  $('pre').text($('div')[0].outerHTML)
});

$('div[contenteditable=true]').keydown(function(e) {
  // trap the return key being pressed
  if (e.keyCode == 13) {
    // insert 2 br tags (if only one br tag is inserted the cursor won't go to the second line)
    document.execCommand('insertHTML', false, '<br><br>');
    // prevent the default behaviour of return key pressed
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 50px; border: 1px solid;" contenteditable="true"></div>
<pre></pre>
<button>Show Source</button>

我希望从上述脚本中得到的输出如下：

<div contenteditable="true">
  <p>
  // content here
  </p>
</div>

注意: 我不希望在按钮点击时添加

标签，而是自动发生。

JsFiddle: https://jsfiddle.net/r3qthx6d/5/ 更新

使用$('div[contenteditable=true]').wrapInner('<p></p>');会在文本框中键入内容时，在文本末尾添加

标签，如此演示: https://jsfiddle.net/r3qthx6d/3/ 然而，这不是我需要的，因为我的目的是让内容被

标签所包围。

- The Codesee

Answer 1

$('div[contenteditable=true]').wrapInner('<p></p>');

- Vitaly

---

这个答案不能解决我的问题。当输入文本时，它没有在文本周围添加<p>标签：jsfiddle.net/r3qthx6d/3 - The Codesee

按下回车键后，您需要将文本包装在p标签中吗？ - Vitaly

我曾经考虑过这个问题，但是他们可能只会输入一行文本。你的代码似乎将文本放在<p>标签之前。 - The Codesee

Answer 2

你可以尝试使用

document.execCommand('defaultParagraphSeparator', false, 'p');

JsFiddle: https://jsfiddle.net/jfb35opu/

- David Ho