当前位置：首页 > news >正文

Monaco Editor组件使用详解

news 2025/12/1 1:11:17

Monaco Editor 是由微软开发并开源的一款代码编辑器，它是 Visual Studio Code（VS Code）的核心部分。Monaco Editor 提供了丰富的特性，包括语法高亮、代码折叠、代码提示（IntelliSense）、多光标选择、搜索和替换等。

Monaco Editor 支持多种编程语言，包括 JavaScript、TypeScript、JSON、HTML、CSS、Less、Sass 等。此外，还可以通过 Monarch 或 Language Server Protocol（LSP）添加对其他语言的支持。

Monaco Editor 使用 Web 技术（HTML、CSS 和 JavaScript）开发，可以轻松地集成到 Web 应用中。它提供了一个易于使用的 API，可以用于创建、修改和查询编辑器状态，以及监听编辑器事件。

演示官网：https://monaco-react.surenatoyan.com/

可以修改不同的属性值，点击Apply，即可看到生效后的结果
在这里插入图片描述

要在 React 中使用 Monaco Editor，可以使用 react-monaco-editor 库，它为 Monaco Editor 提供了一个简单的 React 包装器。以下是在 React 中使用 Monaco Editor 的步骤：

1. 安装 `react-monaco-editor` 和 `monaco-editor`

使用 npm 或 yarn 安装：

npm install react-monaco-editor monaco-editor

或

yarn add react-monaco-editor monaco-editor

2. 在 React 组件中使用 `react-monaco-editor`

创建一个 React 组件，并引入 react-monaco-editor：

import React, { Component } from 'react';
import MonacoEditor from 'react-monaco-editor';class CodeEditor extends Component {constructor(props) {super(props);this.state = {code: '// 编写你的代码...'};}// 当编辑器内容发生变化时调用onChange = (newValue) => {this.setState({ code: newValue });}render() {const { code } = this.state;const options = {selectOnLineNumbers: true,roundedSelection: false,readOnly: false,cursorStyle: 'line',automaticLayout: false,};return (<MonacoEditorwidth="800"height="600"language="javascript"theme="vs-dark"value={code}options={options}onChange={this.onChange}/>);}
}export default CodeEditor;

在这个例子中，我们创建了一个 CodeEditor 组件，它使用了 MonacoEditor 组件。我们设置了一些编辑器选项，例如行号选择、光标样式等。同时，我们还定义了一个 onChange 方法，它会在编辑器内容发生变化时被调用。

3. 将 `CodeEditor` 组件添加到应用中

在你的 React 应用中，将 CodeEditor 组件添加到合适的位置：

import React from 'react';
import CodeEditor from './CodeEditor';function App() {return (<div><h1>Monaco Editor in React</h1><CodeEditor /></div>);
}export default App;