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的文檔。
麻省理工學院，請參閱許可證文件以獲取詳細信息。
