Question

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

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

当我使用execCommand创建一个新的，然后在它之后按Enter键时，＆lt; div>被建造。但是，我想要一个＆lt; p>改为创建。我可以通过使用keyup事件并返回false（使用jQuery）完全停止enter，但是如何强制＆lt; p>标记在＆lt; div＆gt;？（注意，当我已经在 a＆lt; p＆gt;标记内时，它已经正确地放置了＆lt; p＆gt;但是当它在＆lt; div＆gt;内部时它不起作用）

Answer 1

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

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

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

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

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

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

ContentEditable - 按Enter键生成P标签

1 个答案: