自定义富文本编辑器开发：contentEditable结构与光标问题求助

问题描述 #

我正尝试从零构建一款基于Range与Selection API的富文本编辑器（Rich Text Editor），而非使用execCommand，要求具备可扩展性，支持段落对齐、内联样式等基础编辑功能。我了解到SlateJs库可用于构建这类编辑器，但仍决心从零开发，却不知从何入手。

问题在于：用户在我的编辑器中输入时，文本直接进入contentEditable容器元素；而在SlateJs编辑器中，文本会被放入段落（paragraph）元素内嵌套的三层span中。

我该如何实现这种行为？

preventDefault在input事件中无效，但在keydown事件中有效。我编写了如下代码：

editor.addEventListener("keydown",(e)=> {
     e.preventDefault()
    // if the key is a printable character
    if(event.key.length == 1){
        // this always appends to the last of paragraph even if the cursor is somewhere else
        this.topLevelParagraph.innerHTML += event.key
    }
})

现在光标位置不会改变，文本总是添加到段落末尾。

问题解答 #

1. 解决该问题的最佳方式是什么？ #

• 放弃直接操作innerHTML的方式，改用Range与Selection API实现精准的光标定位与内容插入：
  1. 获取当前页面选区：const selection = window.getSelection()
  2. 验证选区有效性，获取对应的Range对象：

     if (selection.rangeCount > 0) {
       const range = selection.getRangeAt(0)
     }
     

  3. 创建要插入的文本节点：const textNode = document.createTextNode(event.key)
  4. 将文本节点插入到光标所在位置：range.insertNode(textNode)
  5. 调整光标到插入文本的后方，保证输入连续性：

     range.setStartAfter(textNode)
     range.setEndAfter(textNode)
     selection.removeAllRanges()
     selection.addRange(range)
     

• 规范编辑器的DOM结构：初始化时确保编辑器内存在默认的<p>容器（内部嵌套你需要的span层级）；每次输入前检查光标所在的父容器是否符合预期结构，若不符合则自动创建或切换到正确的段落容器中。
• 替换事件监听：优先使用beforeinput事件替代keydown，该事件能拦截包括键盘输入、复制粘贴、输入法输入等多种场景，且可以直接获取输入内容，兼容性更强。

2. 推荐可帮助构建类似SlateJs的富文本编辑器的文章或资源 #

• 深入研读MDN上的Range与Selection API官方文档，掌握选区、光标操作的核心逻辑
• 学习ProseMirror的核心架构设计，理解富文本编辑器的状态管理、内容模型构建思路
• 参考Quill等轻量开源编辑器的核心源码，重点分析其选区处理、节点管理、样式应用的实现细节
• 关注讲解自定义contentEditable编辑器的技术博客，重点学习内容模型设计、光标同步、事件拦截处理、样式批量应用等核心步骤

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