社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
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 (
export default App;
2、效果
G22222IF.gif
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!