react monaco editor
v0.56.1
Para construir os exemplos localmente, execute:
yarn
cd example
yarn
yarn start Em seguida, abra http://localhost:8886 em um 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 /> ) ; Adicione o plug-in Monaco Webpack monaco-editor-webpack-plugin ao seu 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: O editor de Mônaco usa as importações de CSS internamente; portanto, se você estiver usando os módulos CSS em seu projeto - é provável que obtenha conflitos por padrão. Para evitar isso-separar o carregador CSS para pacote de aplicativos e 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 as propriedades abaixo são opcionais.
Largura da width do editor. Padrão para 100% .
Altura de height do editor. Padrão para 100% .
valor value do modelo criado automaticamente no editor.
defaultValue o valor inicial do modelo criado automaticamente no editor.
language O idioma inicial do modelo criado automaticamente no editor.
theme o tema do editor
options consulte a interface Monaco IStandaloneeditorConstructionOptions.
overrideServices refere -se à interface Monaco IeditorOverRideServices. Depende das implementações internas do Mônaco e pode mudar com o tempo, verifique o problema do GitHub para obter mais detalhes.
onChange(newValue, event) Um evento emitido quando o conteúdo do modelo atual mudou.
editorWillMount(monaco) Um evento emitido antes do editor montado (semelhante ao componentWillMount of React).
editorDidMount(editor, monaco) Um evento emitido quando o editor foi montado (semelhante ao componentDidMount of React).
editorWillUnmount(editor, monaco) Um evento emitido antes da desmontagem do editor (semelhante ao componentWillUnmount of React).
Consulte a interface Monaco Ieditor.
As interfaces de Mônaco disponíveis por importação
import { monaco } from 'react-monaco-editor' ; Certifique -se de usar o plug -in Monaco Webpack ou siga as instruções sobre como carregar a versão ESM do Mônaco.
Usando o primeiro parâmetro do editorDidMount , ou usando um ref (por exemplo <MonacoEditor ref="monaco"> ) após a que o evento editorDidMount foi demitido.
Em seguida, você pode invocar os métodos de instância por meio this.refs.monaco.editor , por exemplo, this.refs.monaco.editor.focus() para focar a instância do Monacoeditor.
Usando this.refs.monaco.editor.getValue() ou via método de instância do Model :
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ; Por exemplo, você pode configurar alguns esquemas JSON antes do editor montado, então você pode ir com 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 suporta apenas um 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 A maneira mais fácil de usar o react-monaco-editor com create-react-app é usar o projeto React-App-Rewired. Para configurá -lo, são necessárias as seguintes etapas:
react-app-rewired : npm install -D react-app-rewiredreact-scripts por react-app-rewired na seção Scripts de seus packages.jsonconfig-overrides.js no diretório raiz do seu projeto com o seguinte conteúdo: const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
} Para obter mais informações, consulte a documentação do react-app-rewired aqui.
MIT, consulte o arquivo de licença para obter detalhes.
