react monaco editor
v0.56.1
Para construir los ejemplos localmente, ejecute:
yarn
cd example
yarn
yarn start Luego abra http://localhost:8886 en un navegador.
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 /> ) ; Agregue el complemento Monaco Webpack monaco-editor-webpack-plugin a su 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' ]
} )
]
} ;Nota al margen: el editor de Monaco usa las importaciones CSS internamente, por lo que si está utilizando módulos CSS en su proyecto, es probable que obtenga conflicto por defecto. Para evitar eso, el cargador CSS separado para la aplicación y el paquete de monaco-editor:
// 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' ] ,
} Todas las propiedades a continuación son opcionales.
Ancho width del editor. El valor predeterminado al 100% .
height del editor. El valor predeterminado al 100% .
value Valor del modelo creado automático en el editor.
defaultValue el valor inicial del modelo creado automático en el editor.
language El idioma inicial del modelo creado automático en el editor.
theme El tema del editor
options se refieren a la interfaz de Mónaco istandaloneEditorConstructionOptions.
overrideServices se refieren a la interfaz de Mónaco IEDITORTRIDESIVICES. Depende de las implementaciones internas de Mónaco y puede cambiar con el tiempo, consulte el problema de GitHub para obtener más detalles.
onChange(newValue, event) un evento emitido cuando el contenido del modelo actual ha cambiado.
editorWillMount(monaco) Un evento emitido antes de que el editor monte (similar a componentWillMount of React).
editorDidMount(editor, monaco) Un evento emitido cuando el editor ha sido montado (similar a componentDidMount of React).
editorWillUnmount(editor, monaco) Un evento emitido ante el editor desmonte (similar a componentWillUnmount of React).
Consulte el IEDitor de la interfaz Mónaco.
Las interfaces de Mónaco disponibles por importación
import { monaco } from 'react-monaco-editor' ; Asegúrese de usar el complemento Monaco Webpack o siga las instrucciones sobre cómo cargar la versión ESM de Monaco.
Usando el primer parámetro de editorDidMount , o utilizando una ref (por ejemplo <MonacoEditor ref="monaco"> ) después de que haya disparado el evento editorDidMount .
Luego puede invocar métodos de instancias a través de this.refs.monaco.editor , por ejemplo, this.refs.monaco.editor.focus() para enfocar la instancia de monacoeditor.
Usando this.refs.monaco.editor.getValue() o mediante el método de instancia Model :
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ; Por ejemplo, es posible que desee configurar algunos esquemas JSON antes de montar el editor, luego puede ir con 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 } />
) ;
}
}Mónaco solo admite un tema.
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 La forma más fácil de usar el react-monaco-editor con create-react-app es usar el proyecto react-app-srewied. Para configurarlo, se requieren los siguientes pasos:
npm install -D react-app-rewired react-app-rewiredreact-scripts por react-app-rewired en la sección de scripts de sus packages.jsonconfig-overrides.js en el directorio raíz de su proyecto con el siguiente contenido: const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
} Para obtener más información, consulte la documentación de react-app-rewired aquí.
MIT, consulte el archivo de licencia para obtener detalles.
