在 react 中使用 monaco-editor/ react-monaco-editor

http://www.ptbird.cn/react-monaco-editor.html
另外代码不高亮的问题参考：解决0.25.1 版本的 react-monaco-editor 代码高亮和代码提示问题及我的另一篇文章。
注意：
本文章是基于 react-monaco-editor@0.18.0 版本写的，如果使用新版本，比如 0.25.1 代码无法高亮和提示，请参考这篇文章：解决 React 使用 0.25.1 版本的 react-monaco-editor 代码高亮和代码提示

一、描述
monaco-editor 是微软开源的在线代码编辑器，功能非常强大，官方地址：

https://microsoft.github.io/monaco-editor/
二、在 react 中使用
实际应用过程中，其实很少直接用 monaco-editor，因为他的 API 文档写的实在是不怎么样。。

最近接触项目需要一个 playground ，既然是 playground 就需要在线编辑器，并且需要生成二维码。

因为使用 react 技术栈，而技术选型的时候便选择了 monaco-editor，偶然间在 npm 搜 monaco-editor 的时候搜到了 react-monaco-editor，发现做了封装，作为组件化使用，非常方便，省去了 monaco-editor 的诸多麻烦的地方。

react-monaco-editor 地址：

https://github.com/superRaytin/react-monaco-editor
安装：

yarn add react-monaco-editor
引入：

import Monaco from ‘react-monaco-editor’;
一般常用的 prop 如下：

language=“javascript”
value={code}
options={options}
onChange={this.onChangeHandle}
editorDidMount={this.editorDidMountHandle}
language 是编辑器的支持的语言，具体的列表可以在 monaco-editor 官网中查看，不支持 vue 和 jsx，需要使用 html 和 javascript

11111.jpg

onChange(value, e) 接收两个参数， value 是更改的代码内容。

三、效果
1、代码
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import MonacoEditor from ‘react-monaco-editor’;
import ‘./App.css’;

const defaultCode =
export default { name: 'name', code: 'code' };

class App extends Component {
constructor(props) {
super(props);
this.state = {
code: defaultCode,
}
this.onChangeHandle = this.onChangeHandle.bind(this);
}
onChangeHandle(value,e) {
this.setState({
code: value
});
}
editorDidMountHandle(editor, monaco) {
console.log(‘editorDidMount’, editor);
editor.focus();
}
render() {
const code = this.state.code;
const options = {
selectOnLineNumbers: true,
renderSideBySide: false
};
return (

Welcome to React

{this.state.code}

);
}
}

export default App;
2、效果
G22222IF.gif