javascript - 摩纳哥编辑器不会显示在反应应用程序中

Question

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

我按照 github 上的说明进行操作：react-monaco-editor-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

这是我的要求部分示例：

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

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

Answer 2

我遇到了同样的问题。解决方案是将 Webpack 配置为vs从 npm 模块中复制文件夹或使用require.config. 另一种方法是手动将其放入公用文件夹。我不确定这是否是正确的方法，但在我的情况下，这种解决方法非常完美。