React 应用中集成 Ace Editor

安装 React-Ace

首先，你需要安装 react-ace 和 ace-builds（它包含 Ace Editor 的核心文件）：

pnpm install react-ace ace-builds

用法：

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

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

const MyCodeEditor = () => {
  return (
    <AceEditor
      mode="javascript"       // 设置代码模式，如 JavaScript
      theme="github"          // 设置编辑器主题
      name="codeEditor"       // 编辑器的唯一标识符，用于设置多个编辑器实例
      onChange={(value) => console.log(value)}  // 在内容变化时触发
      fontSize={14}           // 设置字体大小
      showPrintMargin={true}  // 显示右侧的打印边距
      showGutter={true}       // 显示左侧的行号栏
      highlightActiveLine={true} // 高亮当前行
      value={`const greeting = "Hello, World!";`} // 设置初始值
      setOptions={{
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
        showLineNumbers: true,
        tabSize: 2,
      }}
      width="100%"            // 设置宽度
      height="400px"          // 设置高度
    />
  );
};

export default MyCodeEditor;