react monaco editor
v0.56.1
Pour construire les exemples localement, exécutez:
yarn
cd example
yarn
yarn start Ensuite, ouvrez http://localhost:8886 dans un navigateur.
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 /> ) ; Ajoutez le plugin WebPack Monaco monaco-editor-webpack-plugin à votre 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: L'éditeur Monaco utilise les importations CSS en interne, donc si vous utilisez des modules CSS dans votre projet - vous obtiendrez probablement des conflits par défaut. Afin d'éviter cela - séparez le chargeur CSS pour l'application et le package monaco-éditeur:
// 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' ] ,
} Toutes les propriétés ci-dessous sont facultatives.
width de largeur de l'éditeur. Par défaut à 100% .
height hauteur de l'éditeur. Par défaut à 100% .
Valeur value du modèle créé automatique dans l'éditeur.
defaultValue la valeur initiale du modèle créé automatiquement dans l'éditeur.
language la langue initiale du modèle créé par l'auto dans l'éditeur.
theme le thème de l'éditeur
options se réfèrent à l'interface Monaco IstandaloneEditorConstructionOptions.
overrideServices se réfèrent à l'interface Monaco IeditorOverridesservices. Cela dépend des implémentations internes de Monaco et peut changer au fil du temps, consultez le problème GitHub pour plus de détails.
onChange(newValue, event) Un événement émis lorsque le contenu du modèle actuel a changé.
editorWillMount(monaco) Un événement émis avant le montage de l'éditeur (similaire à componentWillMount of React).
editorDidMount(editor, monaco) Un événement émis lorsque l'éditeur a été monté (similaire à componentDidMount de React).
editorWillUnmount(editor, monaco) Un événement émis avant que l'éditeur ne soit un mont (similaire à componentWillUnmount of React).
Reportez-vous à l'interface Monaco Iediter.
Les interfaces Monaco disponibles par importation
import { monaco } from 'react-monaco-editor' ; Assurez-vous d'utiliser le plugin Monaco Webpack ou de suivre les instructions sur la façon de charger la version ESM de Monaco.
En utilisant le premier paramètre d' editorDidMount , ou en utilisant un ref (par exemple <MonacoEditor ref="monaco"> ) après le licenciement de l'événement editorDidMount .
Ensuite, vous pouvez invoquer des méthodes d'instance via this.refs.monaco.editor , par exemple this.refs.monaco.editor.focus() pour concentrer l'instance monacoeditor.
Utilisation de this.refs.monaco.editor.getValue() ou via la méthode d'instance Model :
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ; Par exemple, vous souhaiterez peut-être configurer certains schémas JSON avant le montage de l'éditeur, puis vous pouvez aller avec 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 } />
) ;
}
}Monaco ne prend en charge qu'un thème.
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 Le moyen le plus simple d'utiliser le react-monaco-editor avec create-react-app est d'utiliser le projet réadapté React-App. Pour le configurer, les étapes suivantes sont nécessaires:
react-app-rewired : npm install -D react-app-rewiredreact-scripts par react-app-rewired dans la section Scripts de vos packages.jsonconfig-overrides.js dans le répertoire racine de votre projet avec le contenu suivant: const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
} Pour plus d'informations, consultez la documentation de react-app-rewired ici.
MIT, voir le fichier de licence pour plus de détails.
