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 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
前端君6 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6148 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite