react monaco editor
v0.56.1
Чтобы построить примеры локально, запустите:
yarn
cd example
yarn
yarn start Затем откройте http://localhost:8886 в браузере.
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 /> ) ; Добавьте плагин Monaco Webpack monaco-editor-webpack-plugin в свой 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: Monaco Editor использует CSS -импорт внутри, поэтому, если вы используете CSS -модули в своем проекте - вы, вероятно, получите конфликт по умолчанию. Чтобы избежать этого-отдельный CSS-Loader для приложения и пакета 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' ] ,
} Все свойства, ниже ниже, являются необязательными.
width ширины редактора. По умолчанию до 100% .
height редактора. По умолчанию до 100% .
value значения модели создания автоматического в редакторе.
defaultValue Первоначальное значение созданной авто, созданной в редакторе.
language Начальный язык созданного авто, созданного в редакторе.
theme Тема редактора
options см. В интерфейсе Monaco IstandaloneeditorConstructionoptions.
overrideServices относятся к интерфейсу Monaco IeditorOverrideservices. Это зависит от внутренних реализаций Монако и может измениться со временем, проверьте проблему GitHub для получения более подробной информации.
onChange(newValue, event) событие, испускаемое при изменении содержания текущей модели.
editorWillMount(monaco) событие, испускаемое перед установленным редактором (аналогично componentWillMount of React).
editorDidMount(editor, monaco) событие, испускаемое, когда редактор был установлен (аналогично componentDidMount of React).
editorWillUnmount(editor, monaco) событие, испускаемое перед редактором (аналогично componentWillUnmount of React).
Обратитесь к интерфейсу Monaco Ieditor.
Интерфейсы Монако, доступные импортом
import { monaco } from 'react-monaco-editor' ; Обязательно используйте плагин Monaco Webpack или следуйте инструкциям о том, как загрузить версию ESM Monaco.
Использование первого параметра editorDidMount или использования ref (например <MonacoEditor ref="monaco"> ) после того, как editorDidMount событие запустило.
Затем вы можете вызвать методы экземпляра через this.refs.monaco.editor this.refs.monaco.editor.focus()
Используя this.refs.monaco.editor.getValue() Model
const model = this . refs . monaco . editor . getModel ( ) ;
const value = model . getValue ( ) ; Например, вы можете настроить некоторые схемы JSON до установки редактора, затем вы можете пойти с 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 } />
) ;
}
}Монако поддерживает только одну тему.
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 Самый простой способ использования react-monaco-editor с помощью create-react-app -это использовать проект, заменяемый React-App. Для его настройки требуются следующие шаги:
react-app-rewired : npm install -D react-app-rewiredreact-scripts , react-app-rewired в разделе Scripts ваших packages.jsonconfig-overrides.js в корневом каталоге вашего проекта со следующим контентом: const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ;
module . exports = function override ( config , env ) {
config . plugins . push ( new MonacoWebpackPlugin ( {
languages : [ 'json' ]
} ) ) ;
return config ;
} Для получения дополнительной информации о проверке документации react-app-rewired здесь.
MIT, см. Файл лицензии для получения подробной информации.
