使用 AceEditor 时，要实现类似于在光标处插入内容的功能

特别适合一些难记的代码或者函数，可以点击表格或者其他内容回填到编译器上次失去焦点的位置

以下是实现步骤：

1. 监听 AceEditor 的失去焦点事件 (onBlur)。
2. 获取光标位置：使用 AceEditor 的 editor.getCursorPosition()。
3. 插入值：通过 editor.session.insert() 在指定光标位置插入新内容。

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

// 引入 AceEditor 的主题和语言模式
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';

const AceEditorWithInsert = () => {
  const editorRef = useRef(null); // 用于引用 AceEditor 实例
  const [editorValue, setEditorValue] = useState(''); // 记录编辑器的值
  const [focusPosition, setFocusPosition] = useState(null); // 记录光标位置

  // 获取 AceEditor 实例
  const onLoad = (editor) => {
    editorRef.current = editor;
  };

  // 监听 AceEditor 失去焦点
  const handleBlur = () => {
    if (editorRef.current) {
      const editor = editorRef.current;
      const cursorPosition = editor.getCursorPosition(); // 获取光标位置
      setFocusPosition(cursorPosition); // 记录光标位置
    }
  };

  // 插入值到光标位置
  const insertValueAtCursor = (value) => {
    if (editorRef.current && focusPosition) {
      const editor = editorRef.current;
      editor.session.insert(focusPosition, value); // 在光标位置插入值
    }
  };

  // 点击按钮插入值
  const handleClickInsert = () => {
    insertValueAtCursor('[插入内容]');
  };

  return (
    <div>
      <AceEditor
        mode="javascript"
        theme="github"
        name="ace-editor"
        onLoad={onLoad}
        value={editorValue}
        onChange={(newValue) => setEditorValue(newValue)}
        onBlur={handleBlur} // 监听失去焦点
        setOptions={{ useWorker: false }} // 关闭 web worker
        editorProps={{ $blockScrolling: true }}
      />
      <button onClick={handleClickInsert}>插入值</button>
    </div>
  );
};

export default AceEditorWithInsert;

一些字段的含义如下：

1. editorRef：用来保存 AceEditor 实例，以便能够使用 Ace 的 API。
2. onLoad：AceEditor 加载时，通过 onLoad 回调拿到编辑器实例并保存到 editorRef。
3. handleBlur：AceEditor 失去焦点时，获取当前光标位置并保存。
4. insertValueAtCursor：利用 session.insert 方法将值插入到光标位置。
5. handleClickInsert：点击按钮后，触发插入值到光标位置。

关键 API（都是这个编辑器自带的api）:

• editor.getCursorPosition(): 获取当前光标位置。
• editor.session.insert(position, text): 在指定光标位置插入文本。