如何在contenteditable div中使用<p>包装第一个textnode而不移动插入符号

Question

我有一个RTF编辑器，它实际上是一个可内容编辑的div。我注意到它将自动将每个段落包装在<p/>标记中，但第一个除外。例如：

<div id="zss_editor_content" class="zss_editor_content" contenteditable="false" placeholder="">
    First paragraph is a text node
    <p>Second paragraph is wrapped in p</p>
    <p>So is the third&nbsp</p>
</div>

我已经尝试过以下解决方案：https://forum.jquery.com/topic/wrap-text-in-contenteditable：

$( '#editable' ).contents().eq( '0' ).filter( function(){
      return this.nodeType != 1;
} ).wrap( '<div />' );

我不确定将其放在哪里，所以将其放在$(document).on('selectionchange',function(e){}下，但是当我键入第二个字符时，第一个节点被包裹在<p/>标记中，并且将光标放在在第二段中立即显示。

有没有人像第二和第三段的包装方式那样默默地包装第一个textnode？