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

目录React CodeMirrorMonaco Editor Reactreact-simple-code-editorReact Ace结论如果您喜欢此文章请收藏、点赞、评论谢谢祝您快乐每一天。交互式代码编辑器是功能强大的工具可以极大地提升您博客或网站的用户体验。在本文中我们将探讨一些最流行的 React 代码编辑器组件并分析它们的功能和特性。希望本文能帮助您更好地了解哪一款最适合您的项目。让我们开始吧跳转到前面部分React CodeMirrorMonaco Editor Reactreact-simple-code-editorReact AceReact CodeMirrorReact CodeMirror是一个 React 代码编辑器组件它提供丰富的功能和简便的安装方式。其主要功能包括多语言模式多种主题和自定义主题创建选项定制款式和尺寸其他功能包括行号、自动完成、代码高亮和括号闭合。首先使用以下代码安装 React CodeMirror 包npm i uiw/react-codemirror接下来将该CodeMirror组件导入到你的 React 应用中import CodeMirror from uiw/react-codemirror;只需返回该CodeMirror组件它就会渲染一个空白的可编辑框。然后您可以设置初始值以及组件的宽度和高度。我们还可以添加自定义onChange事件当编辑器内的代码发生任何更改时这些事件都会触发。要应用其他功能您可以使用extensions如下所示的 propimport React from react; import CodeMirror from uiw/react-codemirror; function App() { const code console.log(Code Mirror!); return ( CodeMirror value{code} height100px / ); } 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} height100px theme{vscodeDark} / ); } export default App;Monaco Editor ReactMonaco Editor React是一个流行的库它提供了一个功能齐全的 VS Code 代码编辑器。它是目前最强大的代码编辑器组件之一提供以下功能支持超过 50 种不同的语言许多预置主题以及创建自定义主题的选项代码格式和建议语法高亮和缩进线路编号、迷你地图和建议在编辑器内使用搜索功能Control F可自定义样式选项包括字体大小、光标样式和滚动条外观首先请安装该 软件包monaco-editor/reactnpm 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 height100px languagejavascript themevs-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 height100px languagejavascript themevs-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 AceReact Ace是一款流行且易于使用的代码编辑器组件。它几乎具备代码编辑器的所有常见功能并且与 React CodeMirror 或 Monaco Editor React 等库相比使用起来更加便捷。其主要功能包括可选择创建拆分编辑器超过 15 种不同的模式和语言选项许多最流行的主题都可以使用但必须单独导入。多种样式选项以及用于style添加自定义 CSS 的属性可自定义设置例如行数、宽度、高度和自动完成功能。多个事件处理程序例如onChangeonScroll和onFocus首先请使用以下命令安装 React Acenpm 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 height100px value{code} modejavascript thememonokai fontSize16px highlightActiveLine{true} setOptions{{ enableLiveAutocompletion: true, showLineNumbers: true, tabSize: 2 }} / ); } export default App;结论在本文中我们评测了四款最流行的 React 代码编辑器组件。希望现在您已经对哪个库最适合您的项目有了大致的了解——如果还没有您也可以自己构建一个参考文章Best code editor components for React - LogRocket Blog如果您喜欢此文章请收藏、点赞、评论谢谢祝您快乐每一天。