javascript - ContentEditable - 按 Enter 键生成 P 标签

Question

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

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

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

被创建。但是，我想要创建一个 < p >。我可以通过使用 keyup 事件并返回 false(使用 jQuery)来完全阻止 enter 的行为，但是如何强制

标记覆盖

？ (注意，当我已经在内

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

，但在

内时它不起作用)

最佳答案

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

要强制一个段落(或者更确切地说重新格式化段落)你可以用 jQuery 做这样的事情(其中元素是一个 DOM 节点或一个 jQuery 对象):

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

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

在 WYMeditor 中，我们还确保我们实际上是在修改 block 元素，以便我们维护有效的文档结构。如果不是，我们沿着 DOM 树向上查找 block 父 block 。

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

关于javascript - ContentEditable - 按 Enter 键生成 P 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5087334/

上一篇：javascript - DN 地址的正则表达式

下一篇：javascript - 在javascript中执行命令

相关文章：

javascript - 自动完成地址字段触发器到最近列出的GEO位置

javascript - 如何默认 Html.DropDownList 不选择？

php - 如何从 html 调用 Php 函数

javascript - Firefox - 如何在使用双击时获取选定的文本

html - 强制光标 :pointer for link in a div with contenteditable attribute in IE

javascript - 如何在各种浏览器中按下输入后更改 contenteditable block 的行为

javascript - 如何在 Angular 2+ 中获取 json 数据

php - socket.io + php + 目前这是一个现实的解决方案吗

php - 使用 jquery 操作 JSON 数组

javascript - jQuery:使子菜单出现并在一段时间后消失

Answer 1

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

要强制一个段落(或者更确切地说重新格式化段落)你可以用 jQuery 做这样的事情(其中元素是一个 DOM 节点或一个 jQuery 对象):

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

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

在 WYMeditor 中，我们还确保我们实际上是在修改 block 元素，以便我们维护有效的文档结构。如果不是，我们沿着 DOM 树向上查找 block 父 block 。

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