React-Ace编辑器onSelectionChange事件无法获取选中文本问题

React-Ace的onSelectionChange回调参数并非直接返回选中的文本，而是一个包含选区位置信息的Selection对象。要获取实际选中的文本，需要借助编辑器实例的API来实现，具体步骤如下：

1. 创建编辑器引用
   使用React的useRef钩子创建一个引用，用于获取编辑器实例：

import { useRef } from 'react';
import AceEditor from 'react-ace';

// ...

const editorRef = useRef(null);

2. 绑定引用到AceEditor组件
   将创建的ref绑定到AceEditor的ref属性上：

<AceEditor
  mode="mysql"
  theme="tomorrow"
  name="UNIQUE_ID_OF_DIV"
  value={queries ?? ""}
  editorProps={{ $blockScrolling: true }}
  onChange={(e) => {
    setqueries(e);
  }}
  onSelectionChange={handleSelectionChange}
  ref={editorRef} // 绑定引用
/>

3. 修改回调方法获取选中文本
   在handleSelectionChange中，通过editorRef.current获取编辑器实例，再调用getSelectedText()方法拿到选中的文本：

const handleSelectionChange = (selection) => {
  if (editorRef.current) {
    const selectedText = editorRef.current.getSelectedText();
    setSelectedQueries(selectedText);
    console.log("selectedText", selectedText);
  }
}

补充说明 #

• Selection对象包含start、end等位置属性，如果你需要基于选区位置做额外处理，也可以直接使用这个参数。
• 确保在调用getSelectedText()前先判断editorRef.current是否存在，避免组件未挂载时出现空引用错误。

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