摩納哥編輯器不會在React應用中顯示

Question

我開始使用react-monaco-editor庫，因為我想在Web react應用程序中添加一個很酷的json編輯器。

我按照github上的說明進行操作： react-monaco-editor-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}
    />
  );
}