react18+vite4 封装SQL编辑器

安装 react-ace 和 ace-builds

npm install react-ace ace-builds --save
# 或
yarn add react-ace ace-builds

import { useState, useEffect, useRef } from 'react';
import AceEditor, { IAceEditorProps } from 'react-ace';
import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-min-noconflict/theme-github';

interface CustomAceEditorProps extends IAceEditorProps {
  onSave?: (value: string) => void;
  value?: string;
}

function CustomAceEditor(props: CustomAceEditorProps) {
  const [value, setValue] = useState<string>(props.value ?? '');
  const editorRef = useRef<AceEditor>(null);

  useEffect(() => {
    if (editorRef.current) {
      const editor = editorRef.current.editor;

      // 设置options
      editor.setOptions({
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        highlightActiveLine: true,
        showPrintMargin:true,
        printMarginColumn: 80,
        theme: 'github',
        readOnly: props.readOnly ? true : false,
        mode: 'sql'
      });

      // 初始化值
      if (props.value) {
        editor.setValue(value);
      }

      // 绑定 change 回调
      editor.on('change', () => {
        setValue(editor.getValue());
      });
    }
  }, [props]);

  function saveHandler() {
    props.onSave?.(value);
  }

  return (
    <div>
      <AceEditor ref={editorRef} {...props} />
      {props.onSave && <button onClick={saveHandler}>保存</button>}
    </div>
  );
}

export default CustomAceEditor;

组件使用

import { useState } from 'react';
import CustomAceEditor from './CustomAceEditor';

function App() {
  const [sql, setSql] = useState('');

  function saveHandler(value: string) {
    setSql(value);
  }

  return (
    <div>
      <h1>React Ace Editor</h1>
      <CustomAceEditor
        value={sql}
        width="100%"
        height="400px"
        onSave={saveHandler}
      />
    </div>
  );
}

export default App;

vite.config.js配置

import reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";

export default {
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      // 修改 ace 的路径别名
      ace: path.resolve(__dirname, "node_modules/ace-builds/src-noconflict"),
    },
  },
};