contenteditable 编辑器中 Shift+Enter 换行导致结构紊乱怎么办？

contenteditable 编辑器中使用 shift+enter 导致结构紊乱的解决方法

在使用 contenteditable="true" 属性的编辑框时，使用 Shift+Enter 换行会破坏文本的结构。这是因为浏览器默认会在 Shift+Enter 时执行
标签，而
标签在 HTML 结构中并不合适。

解决方法：

浏览器提供了 insertParagraph 命令，可以将选中的文本用

标签包裹。要解决 Shift+Enter 导致的结构紊乱问题，可以修改 keydown 事件处理函数：

function keyDown (event) {
  if (event.shiftKey && event.keyCode === 13) {
    event.preventDefault();
    document.execCommand('insertParagraph');
    return false;
  }

  document.execCommand('formatblock', false, '<p>');
}

说明：

• 在 keydown 事件处理函数中，判断是否同时按下了 Shift 和 Enter 键。
• 如果满足条件，阻止浏览器的默认行为（
  换行），并执行 insertParagraph 命令，将选中的文本用

  标签包裹。

• 最后，仍然执行

  标签的格式化命令，确保文本的格式正确。

提示：

以上解决方法仅在 Chrome 浏览器中测试通过。对于其他浏览器，可能存在不同的方法。

以上就是contenteditable 编辑器中 Shift+Enter 换行导致结构紊乱怎么办？的详细内容，更多请关注其它相关文章！