如何在contenteditable为true的元素内选中contenteditable为false的静态元素

这个功能的核心是接管浏览器默认的光标移动逻辑，手动控制选区范围来实现静态元素的选中，具体实现步骤如下：

• 第一步：拦截方向键的默认行为
  给外层contenteditable="true"的容器绑定keydown事件监听器，当检测到按下左/右方向键时，先调用event.preventDefault()阻止浏览器默认的光标跳过静态元素的行为。
• 第二步：检测光标相邻的静态元素
  通过window.getSelection()接口获取当前选区对象，拿到光标所在的节点位置，判断按下右方向键时光标右侧的下一个节点、按下左方向键时光标左侧的上一个节点是否为contenteditable="false"的静态元素。
• 第三步：手动创建选区选中静态元素
  如果检测到相邻节点是静态元素，创建Range实例，调用range.selectNode(静态元素节点)将Range范围设置为包裹整个静态元素，再调用selection.removeAllRanges()、selection.addRange(range)将当前选区设置为这个Range，即可完成元素的选中。
• 第四步：添加选中状态视觉反馈
  给静态元素预设选中样式类（例如.static-selected），监听全局selectionchange事件，当选区变化时先移除所有静态元素的选中样式，再判断当前选中的节点是否为静态元素，如果是则给它添加选中样式类，实现边框高亮等提示效果。

可运行示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <style>
    [contenteditable=false] {
      display: inline-block;
      margin: 0 4px;
      padding: 2px 4px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    /* 静态元素选中样式 */
    [contenteditable=false].static-selected {
      outline: 2px solid #1890ff;
      outline-offset: 1px;
    }
  </style>
</head>
<body>
  <div id="editor" contenteditable="true">
    foo
    <span contenteditable=false>
      block 1
    </span>
    bar
  </div>

  <script>
    const editor = document.getElementById('editor')
    
    // 清除所有静态元素的选中样式
    function clearSelected() {
      document.querySelectorAll('.static-selected').forEach(el => {
        el.classList.remove('static-selected')
      })
    }

    // 监听选区变化，更新选中样式
    document.addEventListener('selectionchange', () => {
      clearSelected()
      const sel = window.getSelection()
      if (sel.rangeCount === 0) return
      const range = sel.getRangeAt(0)
      const selectedNode = range.commonAncestorContainer
      const el = selectedNode.nodeType === 1 ? selectedNode : selectedNode.parentElement
      if (el?.getAttribute('contenteditable') === 'false') {
        el.classList.add('static-selected')
      }
    })

    // 监听方向键事件
    editor.addEventListener('keydown', (e) => {
      // 只处理左右方向键
      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
      
      const sel = window.getSelection()
      if (sel.rangeCount === 0) return
      const range = sel.getRangeAt(0)
      
      // 如果当前已经选中了静态元素，按方向键就跳到对应侧的文本位置
      const currentSelected = document.querySelector('.static-selected')
      if (currentSelected) {
        clearSelected()
        e.preventDefault()
        const newRange = document.createRange()
        if (e.key === 'ArrowRight') {
          newRange.setStartAfter(currentSelected)
        } else {
          newRange.setStartBefore(currentSelected)
        }
        newRange.collapse(true)
        sel.removeAllRanges()
        sel.addRange(newRange)
        return
      }

      // 检测相邻节点是否为静态元素
      let targetEl = null
      if (e.key === 'ArrowRight' && range.collapsed) {
        targetEl = range.endContainer.nextSibling
      } else if (e.key === 'ArrowLeft' && range.collapsed) {
        targetEl = range.startContainer.previousSibling
      }

      // 处理节点是文本节点的情况，取父节点的相邻节点
      if (targetEl?.nodeType === 3) {
        targetEl = targetEl.textContent.trim() ? null : targetEl.nextSibling
      }

      // 如果相邻是静态元素，就选中它
      if (targetEl?.nodeType === 1 && targetEl.getAttribute('contenteditable') === 'false') {
        e.preventDefault()
        const newRange = document.createRange()
        newRange.selectNode(targetEl)
        sel.removeAllRanges()
        sel.addRange(newRange)
      }
    })
  </script>
</body>
</html>

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