react monaco editor
v0.56.1
要在本地构建示例，请运行：
yarn
cd example
yarn
yarn start然后在浏览器中打开http://localhost:8886 。
yarn add react-monaco-editor import React from 'react' ;
import { createRoot } from "react-dom/client" ;
import MonacoEditor from 'react-monaco-editor' ;
class App extends React . Component {
constructor ( props ) {
super ( props ) ;
this . state = {
code : '// type your code...' ,
}
}
editorDidMount ( editor , monaco ) {
console . log ( 'editorDidMount' , editor ) ;
editor . focus ( ) ;
}
onChange ( newValue , e ) {
console . log ( 'onChange' , newValue , e ) ;
}
render ( ) {
const code = this . state . code ;
const options = {
selectOnLineNumbers : true
} ;
return (
< MonacoEditor
width = "800"
height = "600"
language = "javascript"
theme = "vs-dark"
value = { code }
options = { options }
onChange = { :: this . onChange }
editorDidMount = { :: this . editorDidMount }
/>
) ;
}
}
const container = document . getElementById ( 'root' ) ;
const root = createRoot ( container ) ;
root . render ( < App /> ) ;将摩纳哥Webpack插件monaco-editor-webpack-plugin添加到您的webpack.config.js ：
const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = {
plugins : [
new MonacoWebpackPlugin ( {
// available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
languages : [ 'json' ]
} )
]
} ;Sidenote：摩纳哥编辑器在内部使用CSS导入，因此，如果您在项目中使用CSS模块 - 默认情况下可能会发生冲突。为了避免这种情况 - 应用程序和摩纳哥编辑包的CSS-Loader分开：
// Specify separate paths
const path = require ( 'path' ) ;
const APP_DIR = path . resolve ( __dirname , './src' ) ;
const MONACO_DIR = path . resolve ( __dirname , './node_modules/monaco-editor' ) ;
{
test : / .css$ / ,
include : APP_DIR ,
use : [ {
loader : 'style-loader' ,
} , {
loader : 'css-loader' ,
options : {
modules : true ,
namedExport : true ,
} ,
} ] ,
} , {
test : / .css$ / ,
include : MONACO_DIR ,
use : [ 'style-loader' , 'css-loader' ] ,
} 以下所有属性都是可选的。
编辑器的width宽度。默认为100% 。
编辑器的height 。默认为100% 。
编辑器中自动创建模型的value 。
defaultValue在编辑器中创建的自动创建模型的初始值。
language自动在编辑器中创建的模型的初始语言。
theme编辑主题
options请参阅摩纳哥界面ISTANDALONEEDOTORCONSTORTIONOPTIONS。
overrideServices是指摩纳哥界面IEDITOROVERRIDESERVICES。这取决于摩纳哥的内部实现，并且可能会随着时间的推移而发生变化，请查看Github问题以获取更多详细信息。
当当前模型的内容发生变化时onChange(newValue, event)发出了事件。
editorWillMount(monaco)在编辑器安装之前发出的事件（类似于React的componentWillMount ）。
editorDidMount(editor, monaco)安装了编辑器时发出的事件（类似于React的componentDidMount ）。
editorWillUnmount(editor, monaco)在编辑登录之前发出的事件（类似于React的componentWillUnmount ）。
请参阅摩纳哥界面IEDITOR。
摩纳哥界面可通过导入可用
import { monaco } from 'react-monaco-editor' ; 确保使用摩纳哥Webpack插件或遵循有关如何加载摩纳哥ESM版本的说明。
使用editorDidMount的第一个参数，或使用ref （例如<MonacoEditor ref="monaco"> ）在editorDidMount事件发生后。
然后，您可以通过this.refs.monaco.editor调用实例方法，例如this.refs.monaco.editor.focus()以焦点摩纳哥了脚步。
使用this.refs.monaco.editor.getValue()或通过Model实例的方法：
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ;例如，您可能需要在编辑器安装之前配置一些JSON架构，然后您可以使用editorWillMount(monaco) ：
class App extends React . Component {
editorWillMount ( monaco ) {
monaco . languages . json . jsonDefaults . setDiagnosticsOptions ( {
validate : true ,
schemas : [ {
uri : "http://myserver/foo-schema.json" ,
fileMatch : [ '*' ] ,
schema : {
type : "object" ,
properties : {
p1 : {
enum : [ "v1" , "v2" ]
} ,
p2 : {
$ref : "http://myserver/bar-schema.json"
}
}
}
} ]
} ) ;
}
render ( ) {
return (
< MonacoEditor language = "json" editorWillMount = { this . editorWillMount } />
) ;
}
}摩纳哥只支持一个主题。
import React from 'react' ;
import { MonacoDiffEditor } from 'react-monaco-editor' ;
class App extends React . Component {
render ( ) {
const code1 = "// your original code..." ;
const code2 = "// a different version..." ;
const options = {
//renderSideBySide: false
} ;
return (
< MonacoDiffEditor
width = "800"
height = "600"
language = "javascript"
original = { code1 }
value = { code2 }
options = { options }
/>
) ;
}
}create-react-app使用react-monaco-editor与create-react-app使用的最简单方法是使用React App-Rewired项目。为了设置它，需要以下步骤：
react-app-rewired ： npm install -D react-app-rewiredpackages.json的脚本部分中的react-app-rewired替换react-scriptsconfig-overrides.js并具有以下内容： const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
}有关更多信息，请在此处查看react-app-rewired的文档。
麻省理工学院，请参阅许可证文件以获取详细信息。
