Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

上面脚本中我想要的输出如下：

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

注意：我不希望在点击按钮时添加标记，而是自动发生。

JsFiddle：https://jsfiddle.net/r3qthx6d/5/

更新

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

这不是我需要的，因为我的目标是让代码包含包围。

Answer 1

height: 100%

Answer 2

您可以尝试使用

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

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

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

2 个答案: