react monaco editor
v0.56.1
Untuk membangun contoh secara lokal, jalankan:
yarn
cd example
yarn
yarn start Kemudian buka http://localhost:8886 di 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 /> ) ; Tambahkan plugin Webpack Monaco monaco-editor-webpack-plugin ke webpack.config.js Anda:
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: Editor Monaco menggunakan impor CSS secara internal, jadi jika Anda menggunakan modul CSS dalam proyek Anda - Anda cenderung mendapatkan konflik secara default. Untuk menghindari-terpisah CSS-Loader untuk paket aplikasi dan 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' ] ,
} Semua properti di bawah ini opsional.
Lebar width editor. Default hingga 100% .
Tinggi editor height . Default hingga 100% .
value nilai model yang dibuat otomatis di editor.
defaultValue Nilai awal model yang dibuat otomatis di editor.
language Bahasa awal model yang dibuat otomatis di editor.
theme Tema Editor
options merujuk ke antarmuka monako IstandAloneEditorConstructionOptions.
overrideServices merujuk ke antarmuka monako iediterVerRidServices. Itu tergantung pada implementasi internal Monako dan dapat berubah dari waktu ke waktu, periksa masalah GitHub untuk lebih jelasnya.
onChange(newValue, event) Suatu peristiwa yang dipancarkan ketika konten model saat ini telah berubah.
editorWillMount(monaco) Acara yang dipancarkan sebelum editor dipasang (mirip dengan componentWillMount of React).
editorDidMount(editor, monaco) Suatu peristiwa yang dipancarkan ketika editor telah dipasang (mirip dengan componentDidMount of React).
editorWillUnmount(editor, monaco) Suatu peristiwa yang dipancarkan sebelum editor unmount (mirip dengan componentWillUnmount of react).
Lihat IEDITOR MONACO INTERFACE.
Antarmuka monako tersedia dengan impor
import { monaco } from 'react-monaco-editor' ; Pastikan untuk menggunakan plugin Webpack Monaco atau ikuti instruksi tentang cara memuat versi ESM Monaco.
Menggunakan parameter pertama editorDidMount , atau menggunakan ref (misalnya <MonacoEditor ref="monaco"> ) setelah acara editorDidMount telah ditembakkan.
Kemudian Anda dapat meminta metode instan melalui this.refs.monaco.editor , misalnya this.refs.monaco.editor.focus() untuk memfokuskan instance monako.
Menggunakan this.refs.monaco.editor.getValue() atau melalui metode contoh Model :
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ; Misalnya, Anda mungkin ingin mengonfigurasi beberapa skema JSON sebelum editor dipasang, maka Anda dapat menggunakan 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 } />
) ;
}
}Monako hanya mendukung satu 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 Cara termudah untuk menggunakan react-monaco-editor dengan create-react-app adalah dengan menggunakan proyek react-app-rewired. Untuk mengaturnya, langkah -langkah berikut diperlukan:
react-app-rewired : npm install -D react-app-rewiredreact-scripts dengan react-app-rewired di bagian skrip packages.json Anda.jsonconfig-overrides.js di direktori root proyek Anda dengan konten berikut: const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
} Untuk informasi lebih lanjut, periksa dokumentasi react-app-rewired di sini.
MIT, lihat file lisensi untuk detail.
