本文详解如何在原生 contentEditable 基础上，手动实现 Slate.js 风格的结构化编辑行为——即用户输入始终落入语义化容器（如 <p><span>...</span></p>）而非直接污染顶层元素，并保持光标精准定位、DOM 结构稳定与可扩展性。
本文详解如何在原生 `contenteditable` 基础上，手动实现 slate.js 风格的结构化编辑行为——即用户输入始终落入语义化容器（如 `
...
`）而非直接污染顶层元素，并保持光标精准定位、DOM 结构稳定与可扩展性。要打造一个结构可控、可扩展的富文本编辑器（不依赖 document.execCommand），关键在于接管输入流、精确控制 DOM 插入点、并实时同步光标状态。contentEditable 默认将所有输入“倾泻”到当前焦点节点，而 Slate.js 等现代编辑器通过完全接管输入逻辑，确保每个字符都进入预定义的语义化容器（例如 <p><span data-leaf="true">hello</span></p>）。以下是可落地的核心实践路径：
一、初始化结构：从语义化骨架开始
避免让 contentEditable 直接作用于空 div。初始 DOM 必须包含明确的块级容器与内联载体：
<div id="editor" contenteditable="false">
<p data-block="paragraph">
<span data-leaf="true" data-placeholder="Type here..."></span>
</p>
</div>✅ 关键原则：仅允许带 data-leaf="true" 的 <span> 接收文本输入；所有段落、列表项等块级结构由 data-block 标识。contenteditable="false" 防止浏览器默认输入，后续通过事件显式启用。
二、拦截输入：用 keydown 精确捕获可打印字符
input 事件无法阻止默认行为，而 keydown 可以。需严格过滤非编辑键（如 Enter, Backspace, Ctrl, Arrow 等），仅对可打印字符（e.key.length === 1 且非控制符）进行处理：
editor.addEventListener('keydown', (e) => {
// 跳过功能键、组合键、方向键等
if (
e.key.length !== 1 ||
e.ctrlKey || e.metaKey || e.altKey ||
['Enter', 'Backspace', 'Delete', 'Tab', 'Escape'].includes(e.key)
) return;
e.preventDefault();
const range = window.getSelection().getRangeAt(0);
const leaf = getLeafAtOffset(range.startContainer, range.startOffset);
if (!leaf) return;
// 在 leaf 内插入字符，并更新光标位置
insertCharAtLeaf(leaf, e.key, range.startOffset);
updateCaretAfterInsert(leaf, range.startOffset + 1);
});⚠️ 注意：e.key.length === 1 是简易判断，但对某些 Unicode 字符（如 emoji、组合字符）可能失效。生产环境建议使用 is-printable-key 等库或基于 e.code + Unicode 范围校验。
三、光标管理：动态维护 Range 并精准重置
preventDefault() 后，浏览器不会自动移动光标。你必须手动创建新 Range 并将其设为当前选区：
function updateCaretAfterInsert(leaf, offset) {
const range = document.createRange();
const textNode = leaf.firstChild || leaf.appendChild(document.createTextNode(''));
range.setStart(textNode, offset);
range.collapse(true); // 光标置于 offset 处
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}每次输入后，必须：
- 获取当前 Range 的起始位置；
- 计算插入后的新偏移（考虑换行、删除、粘贴等场景）；
- 重建 Range 并 collapse(true)，确保光标紧邻新字符右侧。
四、结构守卫：输入后强制校验与修复
即使拦截了输入，用户仍可通过粘贴、拖拽、外部脚本破坏结构。因此需建立「结构守卫」机制：
- 在 input、paste、drop 事件后运行 normalizeStructure()；
- 递归遍历编辑器子树，确保：
- 所有文本节点父级为 data-leaf="true" 的 <span>；
- 所有 <span data-leaf> 父级为 data-block 标记的块容器；
- 空 <span data-leaf> 不被删除（保留占位）；
- 连续文本节点自动合并（避免分裂）。
function normalizeStructure(node = editor) {
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
const parent = node.parentElement;
if (!parent?.hasAttribute('data-leaf')) {
// 将文本包裹进合法 leaf
const span = document.createElement('span');
span.setAttribute('data-leaf', 'true');
span.appendChild(node);
parent?.appendChild(span);
}
}
node.childNodes.forEach(normalizeStructure);
}五、进阶路径：数据驱动架构（推荐长期演进）
若目标是类 Slate.js 的可扩展性，建议尽早引入独立的数据模型层（如 Immutable AST 或 JSON Schema）：
- 所有用户操作（输入、删除、格式化）只修改内存中的文档树（如 { type: 'paragraph', children: [{ text: 'hello', bold: true }] }）；
- 每次变更后，全量 diff 并重渲染 DOM（类似 React），而非修补现有节点；
- 编辑器 UI 成为纯视图层，彻底解耦 DOM 操作与业务逻辑。
? 学习资源推荐：
- ProseMirror Guide（深入理解事务、schema、transform）
- Content Editable Deep Dive (MDN)
- 《Designing Evolvable Web APIs with ASP.NET》中关于“Semantic HTML Editing”的章节（思想通用）
- 源码研读：Slate core、ProseMirror model
结构不是约束，而是富文本可预测、可测试、可协作的基础。从一个受控的 <span> 开始，逐步构建你的编辑器宇宙。
