基于monaco-editor的代码编辑框

[twosugar]

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
componentDidMount() {
    console.log('container', document.getElementById('container'))
    this.createMonaco()
    monacoInstance.onDidChangeModelContent((e) => { 
      monacoInstance.getValue() // 获取输入框信息
   });
  }

  createMonaco() {
    monacoInstance = monaco.editor.create(document.getElementById("container"),{
      value: [
        'function x() {',
        'console.log("Hello world!");',
        '}'
      ].join('\n'),    
      language: "javascript",
      theme:'vs-dark', //编辑框颜色
      lineHeight: 24, //行高
      renderSideBySide: true,
      disableMonospaceOptimizations: true, //光标在点击附近显示
    })
  }

componentWillUnmount() {
    monacoInstance.dispose();
  }

render() {
    return <div id="container" style={{minHeight: '400px', maxWidth: '700px'}}></div>
  }