react monaco editor
v0.56.1
Um die Beispiele lokal zu erstellen, laufen Sie:
yarn
cd example
yarn
yarn start Öffnen Sie dann http://localhost:8886 in einem Browser.
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 /> ) ; Fügen Sie das Monaco Webpack-Plugin monaco-editor-webpack-plugin zu Ihrem webpack.config.js hinzu:
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' ]
} )
]
} ;Nebenbemerkung: Der Monaco -Editor verwendet den CSS -Import intern. Wenn Sie also CSS -Module in Ihrem Projekt verwenden, werden Sie wahrscheinlich standardmäßig Konflikte erhalten. Um dieses-separate CSS-Lader für App und Monaco-Eduitor-Paket zu vermeiden:
// 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' ] ,
} Alle folgenden Eigenschaften sind optional.
width des Herausgebers. Verzug auf 100% .
height des Herausgebers. Verzug auf 100% .
value des automatisch erstellten Modells im Editor.
defaultValue Der Anfangswert des auto erstellten Modells im Editor.
language Die anfängliche Sprache des automatisch erstellten Modells im Editor.
theme das Thema des Editors
options beziehen sich auf die Monaco Interface istandaloneEditorConstructionoptions.
overrideServices beziehen sich auf die Monaco -Schnittstelle IEDITOROVERRIDEVICES. Es hängt von den internen Implementierungen von Monaco ab und kann sich im Laufe der Zeit ändern. Überprüfen Sie das GitHub -Problem für weitere Informationen.
onChange(newValue, event) Ein Ereignis, das sich geändert hat, wenn sich der Inhalt des aktuellen Modells geändert hat.
editorWillMount(monaco) Eine Veranstaltung, die vor dem Redakteur ausstrahlt (ähnlich wie componentWillMount von React).
editorDidMount(editor, monaco) Eine Veranstaltung, die beim Montieren des Herausgebers ausgestrahlt wurde (ähnlich wie bei componentDidMount von React).
editorWillUnmount(editor, monaco) Eine Ereignis, die vor dem Herausgeber -Unmott (ähnlich der componentWillUnmount von React) emittiert wurde.
Siehe Monaco Interface Ieditor.
Die Monaco -Schnittstellen, die im Import verfügbar sind
import { monaco } from 'react-monaco-editor' ; Verwenden Sie das Monaco Webpack -Plugin oder befolgen Sie die Anweisungen zum Laden der ESM -Version von Monaco.
Verwenden des ersten Parameters von editorDidMount oder Verwendung eines ref (zB <MonacoEditor ref="monaco"> ) nach dem Entlassen von editorDidMount .
this.refs.monaco.editor.focus() können Sie Instanzmethoden über this.refs.monaco.editor aufrufen.
Model this.refs.monaco.editor.getValue()
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ; Sie möchten beispielsweise einige JSON -Schemas konfigurieren, bevor der Redakteur montiert ist, und dann können Sie sich mit editorWillMount(monaco) entscheiden:
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 unterstützt nur ein Thema.
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 Der einfachste Weg, um den react-monaco-editor mit create-react-app zu verwenden, besteht darin, das von React-App-brewed-Projekt zu verwenden. Für die Einrichtung sind die folgenden Schritte erforderlich:
react-app-rewired npm install -D react-app-rewiredreact-scripts durch react-app-rewired im Abschnitt "Skripte" Ihrer packages.jsonconfig-overrides.js mit dem folgenden Inhalt: const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
} Weitere Informationen finden Sie in der Dokumentation von react-app-rewired .
MIT finden Sie in der Lizenzdatei für Details.
