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;
相关推荐
xjt_09012 分钟前
浅析Web存储系统
前端
foxhuli22940 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript