React项目中react-draft-wysiwyg编辑器无法选中文本求助

1. 阻止编辑器区域的鼠标事件冒泡 #

ReactFlow画布会默认捕获鼠标事件用于拖拽操作，导致编辑器无法正常处理文本选择。给编辑器添加鼠标事件处理，阻止事件冒泡到父级ReactFlow画布：

<Editor
  // 保留原有props...
  onMouseDown={(e) => {
    e.stopPropagation();
  }}
  onMouseUp={(e) => {
    e.stopPropagation();
  }}
/>

2. 精准设置编辑器文本选择样式 #

之前的样式可能因选择器优先级不足未生效，给编辑器内容区域添加明确的全局CSS：

.editor-class .DraftEditor-editorContainer {
  cursor: text !important;
  user-select: text !important;
  pointer-events: auto !important;
}

3. 可选：自定义ReactFlow节点交互逻辑 #

如果需要节点整体可拖拽，但编辑器区域不可触发拖拽，可在ReactFlow的节点配置中通过interactive属性判断：

<Node
  // 其他props...
  interactive={(event) => {
    // 点击目标是编辑器区域时，阻止ReactFlow处理拖拽
    return !event.target.closest('.wrapper-class');
  }}
/>

组件代码修改示例（结合你的TextBody） #

调整后的Editor部分：

<Editor
  editorStyle={{ zIndex: 9999, cursor: 'text', userSelect: 'text' }}
  editorClassName="editor-class"
  editorState={editorState}
  onEditorStateChange={setEditorState}
  placeholder="Add text here"
  ref={ref}
  onMouseDown={(e) => e.stopPropagation()}
  onMouseUp={(e) => e.stopPropagation()}
  // 保留原有toolbar等配置...
/>

以上处理后，编辑器区域的鼠标事件不会被ReactFlow拖拽逻辑捕获，即可正常选中文本。

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