在 contenteditable div 内的文本周围添加 p答案

【问题标题】：Add p around text inside contenteditable div在 contenteditable div 内的文本周围添加 p
【发布时间】：2016-06-09 17:38:37
【问题描述】：

使用下面的代码，我可以在contenteditable div 中成功输入文本，而不是在按下回车按钮时创建新的div，而是创建 。

如何在contentedtiable div 内的文本周围添加 标签？

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

更新

当在contenteditable div 中输入内容时，使用$('div[contenteditable=true]').wrapInner(''); 在文本末尾添加 标签，如下所示：https://jsfiddle.net/r3qthx6d/3/

但这不是我需要的，因为我的目标是让内容被标签包围。

【问题讨论】：

标签： jquery html contenteditable

【解决方案1】：

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

【讨论】：

这个答案不能解决我的问题。键入时它不会在文本周围添加 标签：jsfiddle.net/r3qthx6d/3
他按回车后需要在p标签中换行吗？
我有想过，但他们可能只输入一行文字。您的代码似乎将文本放在  标签之前

【解决方案2】：

你可以试试

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

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

【讨论】：