ContentEditable - 按 Enter 生成 P 个标签

Question

目前我正在使用 contenteditable 制作编辑器。我有以下内容：

<div contenteditable="true">
<h2>Header</h2>
<p>Content lorem ipsum</p>
</div>

当我使用 execCommand 创建一个新的，然后在它之后按回车键时，会创建一个

。但是，我希望创建一个 。我可以通过使用 keyup 事件并返回 false（使用 jQuery）来完全阻止 enter 的行为，但是如何强制 标签覆盖 ？ （注意，当我已经在 inside 一个

标记中时，它已经正确放置了一个

，但是当我在一个

内时它不起作用）

【问题讨论】：

• 我也遇到过这个问题——这不是一个很容易解决的问题。您是否需要通过 execcommand 显式地支持撤消/重做？我的解决方案是不可撤销/重做的。
• 不，不是。 Control-Z 是否仍然有效，还是只是 execCommand 实现被破坏了？
• 嗨@AndrewM，这个问题有点老了，但我想知道你是否找到了解决方案，因为我处于同样的情况。如果您在此处发布它会很棒，因此它对处于相同情况的每个人都有用。

Answer 1

对于即将发布的 WYMeditor 版本，我们通过完全覆盖不同的本机实现（包括输入键处理程序）解决了这个问题。

要强制段落（或者更确切地说重新格式化为段落），您可以使用 jQuery 执行类似的操作（其中元素是 DOM 节点或 jQuery 对象）：

function formatElement (element, tagName) {
    element = $(element);
    newElement = $('<'+tagName+'/>').append(element.clone().get(0).childNodes);
    element.replaceWith(newElement);
}

这可以在 keyup 上完成，您可以通过查看当前选择来获取新创建的元素，然后调用上述函数。

在 WYMeditor 中，我们还确保我们实际上正在修改一个块元素，以便我们维护一个有效的文档结构。如果没有，我们会沿着 DOM 树查找父块。

就像 DanielH 的解决方案一样，这种方法的缺点是您需要实现自己的撤消/重做堆栈，但据我所知，这是唯一可靠的跨浏览器方式。