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 모듈을 사용하는 경우 기본적으로 충돌을 일으킬 수 있습니다. 이를 피하기 위해-App 및 Monaco-Editor 패키지 용 CSS-Loader를 별도의 CSS-Loader :
// 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 인터페이스 ISTANDALONEEDITORCONSSTUCTIONS를 참조하십시오.
overrideServices Monaco 인터페이스 ieditoroverrideservices를 참조하십시오. Monaco의 내부 구현에 따라 다르며 시간이 지남에 따라 변경 될 수 있습니다. 자세한 내용은 Github 문제를 확인하십시오.
onChange(newValue, event) 현재 모델의 내용이 변경되었을 때 발생하는 이벤트입니다.
editorWillMount(monaco) 편집기가 장착되기 전에 방출 된 이벤트 (React의 componentWillMount 와 유사).
editorDidMount(editor, monaco) 편집기가 장착되었을 때 ( componentDidMount of React와 유사) 이벤트가 방출됩니다.
editorWillUnmount(editor, monaco) 편집기가 마운트를 마치기 전에 방출 된 이벤트 (React의 componentWillUnmount 와 유사).
Monaco 인터페이스 ieditor를 참조하십시오.
Monaco 인터페이스는 Import에서 사용할 수 있습니다
import { monaco } from 'react-monaco-editor' ; Monaco Webpack 플러그인을 사용하거나 Monaco의 ESM 버전을로드하는 방법에 대한 지침을 따르십시오.
editorDidMount 의 첫 번째 매개 변수를 사용하거나 editorDidMount 이벤트가 시작된 후 ref (예 <MonacoEditor ref="monaco"> )를 사용합니다.
그런 다음 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 사용하여 사용합니다 create-react-app 과 함께 react-monaco-editor 사용하는 가장 쉬운 방법은 React-App-Lewreated Project를 사용하는 것입니다. 설정하려면 다음 단계가 필요합니다.
react-app-rewired : npm install -D react-app-rewiredpackages.json 의 스크립트 섹션에서 react-app-rewired 로 react-scripts 교체하십시오.config-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, 자세한 내용은 라이센스 파일을 참조하십시오.
