在contenteditable可编辑div内无法将光标定位到非可编辑div前方

这个问题属于浏览器对contenteditable容器内块级非可编辑元素的原生光标识别缺陷，以下是经过验证的可行方案：

• 方案1：注入零宽空格占位
  在所有contenteditable=false的块级元素前后插入不可见的零宽空格字符\u200B，作为可识别的光标锚点。同时配合MutationObserver监听容器内容变动，每次DOM更新后自动校验补充占位符，避免用户输入或删除时把占位符误删。
  参考实现：

const editableRoot = document.querySelector('[contenteditable="true"]')
function injectPlaceholders() {
  const nonEditables = editableRoot.querySelectorAll('[contenteditable="false"]')
  nonEditables.forEach(el => {
    // 前面补占位符
    if (!el.previousSibling || el.previousSibling.nodeType !== Node.TEXT_NODE || !el.previousSibling.textContent.includes('\u200B')) {
      el.before(document.createTextNode('\u200B'))
    }
    // 后面补占位符
    if (!el.nextSibling || el.nextSibling.nodeType !== Node.TEXT_NODE || !el.nextSibling.textContent.includes('\u200B')) {
      el.after(document.createTextNode('\u200B'))
    }
  })
}
// 监听内容变化自动补占位符
const observer = new MutationObserver(injectPlaceholders)
observer.observe(editableRoot, { childList: true, subtree: true })
// 初始化执行一次
injectPlaceholders()

• 方案2：修改非可编辑元素的展示类型
  不要直接使用块级div作为非可编辑元素，两种修改方式二选一即可：

  1. 把非可编辑元素的标签改为span，或者给元素加样式display: inline-block，浏览器对行内/行内块元素的光标定位支持远好于块级元素，大部分场景下无需额外处理就能直接定位到前后位置
  2. 如果需要保留块级独占一行的视觉效果，给inline-block的非可编辑元素加样式width: 100%即可

• 方案3：手动拦截事件控制光标位置
  监听容器的点击、键盘方向键事件，当检测到用户操作意图是定位到非可编辑元素前方时，直接调用Range API手动设置光标位置。
  参考点击场景的实现：

editableRoot.addEventListener('click', e => {
  const nonEditable = e.target.closest('[contenteditable="false"]')
  if (!nonEditable) return
  const rect = nonEditable.getBoundingClientRect()
  // 点击位置在元素左边缘10px范围内，判定为要定位到元素前方
  if (e.clientX - rect.left < 10) {
    const range = document.createRange()
    const sel = window.getSelection()
    range.setStartBefore(nonEditable)
    range.collapse(true)
    sel.removeAllRanges()
    sel.addRange(range)
    e.preventDefault()
  }
})

• 方案4：规避触发场景
  如果只有非可编辑元素出现在容器最开头时才会触发问题，初始化容器时默认在最前面插入一个空文本节点或者<br>标签，避免非可编辑元素成为容器的第一个子节点即可。

内容的提问来源于stack exchange，提问作者Ahmed Khattab