Monaco Editor获取光标位置方法咨询及getPosition报错解决

错误原因 #

你遇到的Property 'getPosition' does not exist on type 'typeof editor'错误，是因为monacoRef.current.editor指向的是Monaco的editor命名空间（包含创建编辑器的工具方法），而不是实例化后的编辑器对象。只有编辑器实例才拥有getPosition()方法。

可行实现方案 #

1. 确保获取到编辑器实例 #

首先要确认你的monacoRef保存的是通过monaco.editor.create()创建的编辑器实例，而不是Monaco模块本身。以React项目为例：

import * as monaco from 'monaco-editor';
import { useRef, useEffect } from 'react';

const MonacoEditor = () => {
  // 声明ref存储编辑器实例，类型为IStandaloneCodeEditor
  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);

  useEffect(() => {
    // 创建编辑器实例并赋值给ref
    const container = document.getElementById('editor-root');
    if (container && !editorRef.current) {
      editorRef.current = monaco.editor.create(container, {
        value: 'console.log("Hello Monaco")',
        language: 'javascript',
        theme: 'vs-dark'
      });
    }

    // 获取当前光标位置
    const cursorPos = editorRef.current?.getPosition();
    if (cursorPos) {
      console.log(`光标行：${cursorPos.lineNumber}，列：${cursorPos.column}`);
    }

    // 组件卸载时销毁编辑器
    return () => {
      editorRef.current?.dispose();
      editorRef.current = null;
    };
  }, []);

  return <div id="editor-root" style={{ width: '100%', height: '500px' }}></div>;
};

export default MonacoEditor;

2. 监听光标位置变化 #

如果需要实时获取光标位置，可以通过编辑器的onDidChangeCursorPosition事件监听：

// 在编辑器创建后添加监听
editorRef.current?.onDidChangeCursorPosition((event) => {
  const { lineNumber, column } = event.position;
  console.log(`实时光标位置：行${lineNumber}，列${column}`);
});

3. 从Selection对象获取位置 #

如果你已经拿到了Selection对象（比如通过editor.getSelection()），可以直接从Selection中提取光标位置：

const selection = editorRef.current?.getSelection();
if (selection) {
  // 光标位置对应selection的endPosition（因为光标是选择的终点）
  console.log(`行：${selection.endLineNumber}，列：${selection.endColumn}`);
}

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