在 Fabric.js + React 项目中，为画布添加全局键盘事件监听（如 Ctrl+C/V、方向键移动）后，新添加的 Text 对象常因 event.preventDefault() 意外阻止了 Fabric 默认的双击编辑行为，导致无法进入文本编辑模式。本文提供兼容性修复方案。
在 fabric.js + react 项目中，为画布添加全局键盘事件监听（如 ctrl+c/v、方向键移动）后，新添加的 text 对象常因 event.preventdefault() 意外阻止了 fabric 默认的双击编辑行为，导致无法进入文本编辑模式。本文提供兼容性修复方案。
当使用 fabricjs-react 并通过 window.addEventListener('keydown', ...) 绑定全局键盘事件时，一个常见但容易被忽视的问题是：无差别调用 event.preventDefault() 会拦截 Fabric.js 内部对文本编辑事件（如双击激活、Enter 确认、Esc 取消）的捕获逻辑，尤其影响 fabric.Text 和 fabric.IText 的可编辑性。
根本原因在于：Fabric.js 依赖原生 mousedown/dblclick/keydown 事件链来触发 IText.enterEditing()。一旦你在全局 keydown 中对所有按键（包括字母、Backspace、Enter、Esc）调用了 preventDefault()，Fabric 就无法收到这些关键事件，从而无法启动或控制编辑流程。
✅ 正确做法是：仅对明确需要拦截的快捷键调用 preventDefault()，并对非快捷键放行；同时优先使用 document.onkeydown 替代 window.addEventListener（避免事件冒泡干扰 Fabric 的事件委托机制）。
以下是推荐的修复版 useEffect 实现：
useEffect(() => {
if (!editor || !fabric) return;
const handleKeyDown = (e: KeyboardEvent) => {
// ✅ 关键原则：只阻止已知快捷键，其他按键必须放行！
const isCtrl = e.ctrlKey || e.metaKey;
const keyCode = e.keyCode;
// 处理方向键移动选中对象（仅当有活动对象且非编辑状态）
const activeObj = editor.canvas.getActiveObject();
const isEditingText = activeObj instanceof fabric.IText && activeObj.isEditing;
if (!isEditingText) {
switch (keyCode) {
case 37: // ←
case 38: // ↑
case 39: // →
case 40: // ↓
e.preventDefault(); // 可安全阻止：此时不处于文本编辑中
moveSelected(
keyCode === 37 ? [-1, 0] :
keyCode === 38 ? [0, -1] :
keyCode === 39 ? [1, 0] : [0, 1],
editor
);
return;
}
}
// 处理剪贴板快捷键（仅在非编辑状态下拦截，避免影响输入）
if (!isEditingText) {
if (isCtrl && keyCode === 67) { // Ctrl+C
e.preventDefault();
copy(editor);
} else if (isCtrl && keyCode === 86) { // Ctrl+V
e.preventDefault();
paste(editor);
} else if (isCtrl && keyCode === 88) { // Ctrl+X
e.preventDefault();
copy(editor);
removeSelectedObject(editor);
}
}
// ? 其他按键（包括 Enter, Esc, 字母、数字等）——绝不调用 preventDefault()
// Fabric.js 需要它们来处理 IText 编辑生命周期
};
// 使用 document.onkeydown 而非 addEventListener，更易管理且避免重复绑定
document.onkeydown = handleKeyDown;
return () => {
document.onkeydown = null; // 清理时重置
};
}, [editor, fabric]);? 重要注意事项：
-
永远不要在文本编辑期间拦截 Enter/Esc/Backspace/Delete：这些是
IText编辑的核心控制键。可通过activeObj instanceof fabric.IText && activeObj.isEditing判断当前是否处于编辑态，并跳过拦截。 -
避免使用
window.addEventListener+removeEventListener在 Fabric 场景中：Fabric 内部也监听document级事件，混合使用易引发竞态或重复绑定。 -
确保添加文本时使用
fabric.IText而非fabric.Text：只有IText支持双击编辑。示例：const text = new fabric.IText('Edit me!', { left: 100, top: 100, fontSize: 24, selectable: true, evented: true }); editor.canvas.add(text).renderAll(); -
调试技巧：在
handleKeyDown中临时添加console.log('Key:', e.key, 'Editing?', isEditingText)，验证编辑态判断是否准确。
通过以上调整，你既能保留方向键微调、Ctrl+C/V 等增强功能，又完全兼容 Fabric.js 原生文本编辑体验——双击进入编辑、Enter 提交、Esc 取消、鼠标拖选、光标定位等功能全部恢复正常。
