React 应用中集成 Ace Editor

安装 React-Ace

首先,你需要安装 react-aceace-builds(它包含 Ace Editor 的核心文件):

复制代码
pnpm install react-ace ace-builds

用法:

javascript 复制代码
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;
相关推荐
@大迁世界5 分钟前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
华仔啊1 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
Bacon2 小时前
前端:从0-1实现一个脚手架
前端
Bacon2 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye2 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2332 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6802 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静2 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐2 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
atwednesday3 小时前
日志处理
javascript