一、描述

monaco-editor 是微软开源的在线代码编辑器,功能非常强大,官方地址:

二、在 react 中使用

实际应用过程中,其实很少直接用 monaco-editor,因为他的 API 文档写的实在是不怎么样。。

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

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

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 官网中查看,不支持 vuejsx,需要使用 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 (
      <div >
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
        </div>
        <div className="wrapper">
          <div className="editor-container" >
          <MonacoEditor
language="javascript"
value={code}
options={options}
onChange={this.onChangeHandle}
editorDidMount={this.editorDidMountHandle}
          />
          </div>
          <div className="view"  contenteditable={true}>
          {this.state.code}
          </div>
        </div>
      </div>
    );
  }
}

export default App;

2、效果

G22222IF.gif