Question

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

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

但似乎我遗漏了一些可能没有在DOC中为webpack设置共享的内容。在我使用doc中的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}
    />
  );
}

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

2 个答案: