Question

Monaco 编辑器不会显示在 React 应用程序中

2017-06-25

4445

javascript json reactjs editor monaco-editor

我开始使用 react-monaco-editor 库，因为我想在我的 web react 应用程序中添加一个很酷的 json 编辑器。

我按照 github 上的说明进行操作： react-monaco-editor-DOC

但似乎我遗漏了一些东西，这些东西可能没有在 DOC 中与 webpack 设置共享。在我使用文档中的 webpack 设置说明后，导入库并添加以下行：

import MonacoEditor from 'react-monaco-editor';

class Editor extends React.Component{

  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }

  render(){	
    const options = {
      selectOnLineNumbers: true
    };

    return(
      <div>
        <MonacoEditor
         width="800"
         height="600"
         language="json"
         value="// some code"
         options={options}
         editorDidMount={this.editorDidMount}/>
      </div>
      );
  }
}

我得到一个空的文本区域。

Answer 1

我遇到了同样的问题。解决方案是配置 Webpack 从 npm 模块内部复制 vs 文件夹或使用 require.config 。另一种方法是手动将其放入公共文件夹中。我不确定这是否是正确的方法，但就我而言，这种解决方法非常有效。

Answer 2

这是我所需部分的示例：

render() {
  const requireConfig = {
    url: 'node_modules/monaco-editor/min/vs/loader.js',
    paths: {
      vs: 'node_modules/monaco-editor/min/vs'
    }
  };

  return (
    <MonacoEditor
      ...
      requireConfig={requireConfig}
    />
  );
}