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;
相关推荐
脑袋大大的2 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0111 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui