粘贴 </p> 结束标记，而不在 contenteditable 中生成开始 p 标记

Question

我有一个可内容编辑的 div：

<div id="result" class="content" contenteditable="true"><p><br/></p></div>

我希望在按 ENTER 时形成新段落，为此我拦截 ENTER 键并通过插入 html 代码替换默认操作：

$(".content").on("keydown",function(e){if(e.which == 13) { e.preventDefault(); pasteHtmlAtCaret("</p><p><br/>");}});

我希望当我按下 ENTER 时，</p><p><br/> 会关闭现有段落并打开一个新段落。所以，如果我输入：'hello world' + ENTER，我应该有：

<p>hello world</p><p><br/></p>

您可以在其中识别</p><p><br/> 部分。 我观察到不同的行为。我明白了：

<p>hello world<p></p><p><br></p></p>

因此，似乎第一个</p> 产生了一个开始的<p> 标记，而在<br/> 标记之前的<p> 产生了一个匹配的结束p 标记。这是否意味着我的浏览器忽略了包装 <p></p> 的存在？ 当我插入一小段 html 代码时，如何避免产生新的p 标签？

我正在使用 Chromium 和 jQuery 1.7.2。

Answer 1

编辑发生在文档对象模型 (DOM) 中。 HTML 标签实际上并不存在于编辑器中。 HTML 被解析为 DOM。当 DOM 被序列化时，会再次生成 HTML 标签。因此，不正确的 HTML 片段不能被粘贴而没有后果。