React-ace如何获取光标位置？求获取编辑器实例调用getCursorPosition()

核心思路：通过onLoad钩子捕获编辑器实例 #

React-ace组件提供了onLoad回调，编辑器初始化完成后会把原生Ace实例传入这个函数，你只需要把实例存起来，之后就能调用所有原生Ace的API，包括getCursorPosition()。

函数组件实现示例（用useRef存储实例） #

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

// 引入需要的模式和主题
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-monokai';

const MyEditor = () => {
  const editorRef = useRef(null);

  // 编辑器加载完成时保存实例
  const handleEditorLoad = (editor) => {
    editorRef.current = editor;
  };

  // 获取光标位置的方法
  const getCursorPosition = () => {
    if (editorRef.current) {
      const pos = editorRef.current.getCursorPosition();
      console.log('当前光标位置：行', pos.row, '，列', pos.column);
      // 这里可以根据需求处理位置数据
    }
  };

  return (
    <div>
      <AceEditor
        mode="javascript"
        theme="monokai"
        onLoad={handleEditorLoad}
        name="editor-container"
        editorProps={{ $blockScrolling: true }}
        width="100%"
        height="300px"
      />
      <button onClick={getCursorPosition}>查看光标位置</button>
    </div>
  );
};

export default MyEditor;

类组件实现示例（用实例属性存储） #

import React from 'react';
import AceEditor from 'react-ace';

import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-monokai';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.editorInstance = null;
  }

  handleEditorLoad = (editor) => {
    this.editorInstance = editor;
  };

  getCursorPosition = () => {
    if (this.editorInstance) {
      const pos = this.editorInstance.getCursorPosition();
      console.log('当前光标位置：行', pos.row, '，列', pos.column);
    }
  };

  render() {
    return (
      <div>
        <AceEditor
          mode="javascript"
          theme="monokai"
          onLoad={this.handleEditorLoad}
          name="editor-container"
          editorProps={{ $blockScrolling: true }}
          width="100%"
          height="300px"
        />
        <button onClick={this.getCursorPosition}>查看光标位置</button>
      </div>
    );
  }
}

export default MyEditor;

注意事项 #

• 必须等待onLoad回调触发后再调用getCursorPosition()，否则编辑器实例还未初始化，会报错。
• getCursorPosition()返回的对象包含row（从0开始计数的行号）和column（从0开始计数的列号）两个属性，和原生Ace Editor的返回格式完全一致。

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