http://www.ptbird.cn/react-monaco-editor.html
另外代碼不高亮的問題參考：解決0.25.1 版本的 react-monaco-editor 代碼高亮和代碼提示問題及我的另一篇文章。
注意：
本文章是基於 [email protected] 版本寫的，如果使用新版本，比如 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