登录

react-ace

securingsincityMIT活跃维护

把 Ace 代码编辑器封装成 React 组件，方便在 React 项目里直接嵌入带语法高亮和编辑能力的代码编辑区。

React Ace Component

v15.0.0发布于 2026-07-29 12:29 UTC4,204star596fork同步于 2026-11-10 11:38 UTC
代码编辑器React 组件Ace 编辑器语法高亮
对比 GitHub 官网acecode-editorhacktoberfestjavascriptreact

怎么上手

由 README 提炼，执行前请确认
原文 
npm install react-ace ace-builds
硬件要求按 README 说明

README 未说明，纯前端浏览器运行，无 GPU 或显存要求

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼
没人工点评？写下你的经验

把 Ace 代码编辑器封装成 React 组件，省去手动挂载和同步状态的麻烦

把 Ace 代码编辑器封装成 React 组件，方便在 React 项目里直接嵌入带语法高亮和编辑能力的代码编辑区。

核心能力

  • 提供 AceEditor 组件，用 mode 和 theme 属性配置语言与主题
  • 支持 Split 分屏编辑器和 Diff 对比编辑器组件
  • 通过 onChange 回调把编辑器内容变化同步给 React
  • v8 起改用 ace-builds，不再依赖 Brace

容易踩的坑

v8 起不再支持 Brace，需按迁移文档改用 ace-builds；mode、theme、ext-language_tools 等要单独 import 对应 ace-builds 模块，否则不生效；AceEditor 需传唯一的 name 作为容器 id

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

最近发版

5 个版本v15.0.0
全部 release
  1. v15.0.0v15.0.0 - ESM Support最新正式版2026-07-29 · 2026-07-29 12:29 UTC

    Closes #2122 and #1540

    react-ace now ships a native ESM build alongside CommonJS. import AceEditor from "react-ace" resolves to real ES modules in modern bundlers and in Node — fixing default-import interop under Vite 8's stricter CommonJS handling (#2122).

    • New exports map with import/require conditions and per-format TypeScript declarations (lib/index.mjs + lib/index.d.mts for ESM, lib/index.js + lib/index.d.ts for CJS)
    • module field added for older bundlers; main/types unchanged for legacy tooling
    • Verified with publint and arethetypeswrong (green across node10, node16, and bundler resolution modes)

    Breaking changes

    • Deep imports are no longer supported. The exports map only exposes the package root, so paths like react-ace/lib/ace no longer resolve. Import everything from the root instead: import AceEditor, { split as SplitEditor, diff as DiffEditor } from "react-ace";
    • These were never documented; most users are unaffected.
    • ace-builds now loads when react-ace is imported rather than lazily on first render. Bundle contents are unchanged (it was always included); if you want to defer loading, lazy-load react-ace itself, e.g. via React.lazy().

    Other changes

    • The SSR window shim is gone — modern ace-builds evaluates cleanly without a window object, so server-side imports work with no globals mutation.
    • Fixed prop-types usage that would crash under Node's ESM loader (PropTypes.oneOfType is not a function).
    • Loading Ace from a CDN (window.ace) continues to work as before, as do the UMD bundles in dist/.
  2. v14.1.02026-07-29 · 2026-07-29 12:02 UTC
    查看更新说明

    What's Changed

    New Contributors

    Full Changelog: https://github.com/securingsincity/react-ace/compare/v14.0.1...v14.1.0

  3. v14.0.12025-02-11 · 2025-02-11 02:51 UTC
    查看更新说明

    React 19 support Full Changelog: https://github.com/securingsincity/react-ace/compare/v14.0.0...v14.0.1

  4. v13.0.02024-11-02 · 2024-11-02 02:23 UTC
    查看更新说明

    What's Changed

    New Contributors

    Full Changelog: https://github.com/securingsincity/react-ace/compare/v12.0.0...v13.0.0

  5. v12.0.02024-06-25 · 2024-06-25 01:25 UTC
    查看更新说明

    What's Changed

    New Contributors

    Full Changelog: https://github.com/securingsincity/react-ace/compare/v11.0.1...v12.0.0

用户点评

登录用户的真实使用记录，可按版本和硬件筛选
共 0 条

    还没有人点评。第一个说出真实体验的人最有价值。

    README 原文

    未翻译
    在 GitHub 打开

    React-Ace

    logo

    Backers on Open Collective Sponsors on Open Collective Greenkeeper badge

    npm version CDNJS Coverage Status

    A set of react components for Ace

    NOTE FOR VERSION 8! : We have stopped support for Brace and now use Ace-builds. Please read the documentation on how to migrate. Examples are being updated.

    DEMO of React Ace

    DEMO of React Ace Split Editor

    DEMO of React Ace Diff Editor

    Install

    npm install react-ace ace-builds

    yarn add react-ace ace-builds

    Basic Usage

    import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

    Examples

    Checkout the example directory for a working example using webpack.

    Documentation

    Ace Editor

    Split View Editor

    Diff Editor

    How to add modes, themes and keyboard handlers

    Frequently Asked Questions

    Migrate to version 8

    Backers

    Support us with a monthly donation and help us continue our activities. [Become a backer]

    Sponsors

    Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

    相关项目

    同分类里 star 最高的项目
    对比全部 →
    vscode
    microsoft·TypeScript

    微软开源的跨平台代码编辑器，基于 Electron 和 TypeScript 构建，支持插件扩展、调试和 Git 集成，适合日常开发写代码。

    代码编辑器+4编辑器 / IDE
    195250+16644k1.145.22026-11-10 11:10 UTC
    neovim
    neovim·Vim Script

    Vim 的分支版本，用 Lua 做配置和插件开发，内置 LSP 与异步 API，让终端编辑器更好扩展、更好用。

    文本编辑器+4编辑器 / IDE
    103537+757.4kv0.12.62026-11-10 05:17 UTC
    zed
    zed-industries·Rust

    用 Rust 打造的高性能多人协作代码编辑器，由 Atom 和 Tree-sitter 作者开发，主打低延迟编辑与实时协同编码。

    代码编辑器+4编辑器 / IDE
    94639+78712kv1.27.02026-11-10 11:13 UTC
    AFFiNE
    toeverything·TypeScript

    把文档、白板、表格融为一体的开源知识库，可离线使用、支持多人实时协作，是 Notion 和 Miro 的替代方案。

    知识库+4编辑器 / IDE
    74415+1285.5kv2026.11.9-canary.9072026-11-10 10:49 UTC