三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

适用于 React 的最佳代码编辑器组件

发布时间：2026/8/15 11:21:07 三亩地 编程学习日记
适用于 React 的最佳代码编辑器组件

目录

React CodeMirror

Monaco Editor React

react-simple-code-editor

React Ace

结论

如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。

交互式代码编辑器是功能强大的工具，可以极大地提升您博客或网站的用户体验。在本文中，我们将探讨一些最流行的 React 代码编辑器组件，并分析它们的功能和特性。希望本文能帮助您更好地了解哪一款最适合您的项目。让我们开始吧！

跳转到前面部分：

  • React CodeMirror
  • Monaco Editor React
  • react-simple-code-editor
  • React Ace

React CodeMirror

React CodeMirror是一个 React 代码编辑器组件，它提供丰富的功能和简便的安装方式。其主要功能包括：

  • 多语言模式
  • 多种主题和自定义主题创建选项
  • 定制款式和尺寸
  • 其他功能包括行号、自动完成、代码高亮和括号闭合。

首先，使用以下代码安装 React CodeMirror 包：

npm i @uiw/react-codemirror

接下来，将该CodeMirror组件导入到你的 React 应用中：

import CodeMirror from "@uiw/react-codemirror";

只需返回该CodeMirror组件，它就会渲染一个空白的可编辑框。然后，您可以设置初始值以及组件的宽度和高度。

我们还可以添加自定义onChange事件，当编辑器内的代码发生任何更改时，这些事件都会触发。要应用其他功能，您可以使用extensions如下所示的 prop：

import React from "react"; import CodeMirror from "@uiw/react-codemirror"; function App() { const code = "console.log('Code Mirror!');" return ( <CodeMirror value={code} height="100px" /> ); } export default App;

诸如自动补全、语言和主题等附加功能需要单独导入。以下示例中，我们将添加vscode主题，您可以按如下方式安装：

npm i @uiw/codemirror-theme-vscode

最终代码如下所示：

import React from "react"; import CodeMirror from "@uiw/react-codemirror"; import { vscodeDark } from "@uiw/codemirror-theme-vscode"; function App() { const code = "console.log('Code Mirror!');"; return ( <CodeMirror value={code} height="100px" theme={vscodeDark} /> ); } export default App;

Monaco Editor React

Monaco Editor React是一个流行的库，它提供了一个功能齐全的 VS Code 代码编辑器。它是目前最强大的代码编辑器组件之一，提供以下功能：

  • 支持超过 50 种不同的语言
  • 许多预置主题，以及创建自定义主题的选项
  • 代码格式和建议
  • 语法高亮和缩进
  • 线路编号、迷你地图和建议
  • 在编辑器内使用搜索功能Control + F
  • 可自定义样式选项，包括字体大小、光标样式和滚动条外观

首先，请安装该 软件包：@monaco-editor/react

npm i @monaco-editor/react

与 React CodeMirror 相比，Monaco Editor React 的易用性尤为突出，它所需的外部库更少。这使得切换语言和主题变得简单，同时还允许您自定义编辑器属性，例如宽度、高度、初始值和onChange事件：

import Editor from "@monaco-editor/react"; function App() { const code = "console.log('Monaco Editor!');"; return ( <Editor height="100px" language="javascript" theme="vs-dark" value={code} /> ); } export default App;

您可以使用该属性添加其他功能options。由于 Monaco Editor React由 VS Code 提供支持，因此您几乎可以找到任何您能想到的功能。

在下面的示例中，我们将融入其中一些功能，例如自定义样式、语言和主题规范、代码建议和代码格式化：

import Editor from "@monaco-editor/react"; function App() { const code = "var message = 'Monaco Editor!' \nconsole.log(message);"; return ( <Editor height="100px" language="javascript" theme="vs-dark" value={code} options={{ inlineSuggest: true, fontSize: "16px", formatOnType: true, autoClosingBrackets: true, minimap: { scale: 10 } }} /> ); } export default App;

react-simple-code-editor

顾名思义，react-simple-code-editor是一个轻量级且易于使用的库。虽然它的功能不如我们上面介绍的那些库那么多，但它的包体积更小，并且提供了应用程序通常需要的所有基本功能，包括：

  • 使用第三方库进行语法高亮显示
  • 可自定义缩进
  • 将文本用方括号或圆括号括起来

需要注意的是，react-simple-code-editor 并不是一个功能非常强大的库，因此处理大型文档可能会影响输入速度。此外，它提供的样式选项也比较有限。

首先，请使用以下命令安装 react-simple-code-editor。您还需要安装像Prism这样的第三方库来实现语法高亮显示：

npm i react-simple-code-editor npm i prismjs

编辑器的基本功能与我们上面讨论的类似。您可以自定义初始值和一些样式选项，例如内边距和制表符大小。

与其他编辑器不同的是，用户必须自行实现状态管理，以存储代码以及在编辑器中所做的任何更改。为此，您可以使用一个onValueChange函数，其工作方式类似于onChange事件处理程序。

与其他编辑器的主要区别在于，我们可以使用属性编辑 CSSstyle，并且需要导入一些外部文件。这些文件用于语法高亮；如上所述，Prism 是一个常用的选择。我们可以使用属性设置高亮显示highlight。

注意：由于编辑器本身只是一个空框，因此大部分样式都必须使用 CSS 来实现。

在下面的示例中，我们使用了一个code状态来存储编辑器中所做的任何更改。我们还使用内联 CSS 添加了一些简单的样式：

import { useState } from "react"; import Editor from "react-simple-code-editor"; import { highlight, languages } from "prismjs/components/prism-core"; import "prismjs/components/prism-clike"; import "prismjs/components/prism-javascript"; import "prismjs/themes/prism.css"; function App() { const [code, setCode] = useState( "var message = 'Monaco Editor!' \nconsole.log(message);" ); return ( <Editor value={code} padding={10} onValueChange={(code) => setCode(code)} highlight={(code) => highlight(code, languages.js)} style={{ fontFamily: "monospace", fontSize: 17, border: "1px solid black" }} /> ); } export default App;

React Ace

React Ace是一款流行且易于使用的代码编辑器组件。它几乎具备代码编辑器的所有常见功能，并且与 React CodeMirror 或 Monaco Editor React 等库相比，使用起来更加便捷。其主要功能包括：

  • 可选择创建拆分编辑器
  • 超过 15 种不同的模式和语言选项
  • 许多最流行的主题都可以使用，但必须单独导入。
  • 多种样式选项，以及用于style添加自定义 CSS 的属性
  • 可自定义设置，例如行数、宽度、高度和自动完成功能。
  • 多个事件处理程序，例如onChange，onScroll和onFocus

首先，请使用以下命令安装 React Ace：

npm i react-ace

与之前的编辑器类似，您可以为 Ace 编辑器组件设置初始值以及自定义事件处理程序。您还可以设置模式和主题。不过，这些必须从库中单独导入。您可以使用属性应用其他选项setOptions。

在下面的示例中，我们将添加自动完成功能、高亮显示活动行以及一些样式：

import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-javascript"; import "ace-builds/src-noconflict/theme-monokai"; import "ace-builds/src-noconflict/ext-language_tools"; function App() { const code = "var message = 'Monaco Editor!' \nconsole.log(message);"; return ( <AceEditor height="100px" value={code} mode="javascript" theme="monokai" fontSize="16px" highlightActiveLine={true} setOptions={{ enableLiveAutocompletion: true, showLineNumbers: true, tabSize: 2 }} /> ); } export default App;

结论

在本文中，我们评测了四款最流行的 React 代码编辑器组件。希望现在您已经对哪个库最适合您的项目有了大致的了解——如果还没有，您也可以自己构建一个！

参考文章：Best code editor components for React - LogRocket Blog

如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。

编程学习 学习日记 实战经验
← 返回列表