JavaScript：当用户按下回车键且插入符号位于 html 个节点内时，如何正确处理 contenteditable 中的内容中断？

Question

我正在开发一个简单的块编辑器系统，当用户在块中间按回车键时，我正在努力移动/设置块之间的内容样式。假设我有这个可编辑的 div，插入符号显示为“|”以下：

<p contenteditable="true">this is my <strong><em>content |with</em> some styles</strong></p>

如果我按回车键，我想实现这个：

<p contenteditable="true">this is my <strong><em>content </em></strong></p>
<p contenteditable="true"><strong><em>with</em> some styles</strong></p>

更准确地说，我已经在处理节点创建（例如上面的 p 标签输入键）。

当用户按下回车键并且光标位于 html 节点内时，我遇到的问题是内容本身。此处，插入符号位于 strong 和 em 节点内。我发现很难 (1) 如果像上面那样涉及多个 HTML 子节点，并且 (2) 相应地拆分内部内容（“这是我的某些样式的内容”）并重新分配<strong> 和 <em> 标签，它们在逻辑上应该在两行上。

另外，有多个 contenteditable 元素是有目的的，也是当前的限制条件。

非常希望在纯粹的 JavaScript 中提供一些指导。谢谢！

Answer 1

如果有人遇到同样的问题，我是这样解决的：

// START: Somewhere in my code
const wrapper = document.querySelector('.wrapper') // Content wrapper
wrapper.addEventListener('keydown', handleKeyDown)

const handleKeyDown = (e) => {
  if (e.keyCode === 13) { // User hits enter
    e.preventDefault() // cancel enter
    // ... other logic
    splitContent(e.target) // call my method to split content if required
  }
}
// END: Somewhere in my code

// the method that solved my issue, using Range and Selection objects
const splitContent = (node) => {
  const range = window.getSelection().getRangeAt(0)
  // Select the end node and its offset from the caret
  range.setStart(range.endContainer, range.endOffset);
  // End the selected range at the end of the node content 
  range.setEnd(node, node.childNodes.length) 
  // Extract content from the defined range (the key is here)
  const content = range.extractContents() 
  // Call another method to use this extracted content with formatting intact
  doWhateverWithTheExtractedContent(content)
}

JavaScript：当用户按下回车键且插入符号位于 html 个节点内时，如何正确处理 contenteditable 中的内容中断？

JavaScript: How to correctly handle content break in contenteditable when user hits enter and caret is within html nodes?

html

javascript

range

caret

contenteditable