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' ]
} )
]
} ;サイドノート：Monaco EditorはCSSインポートを内部的に使用しているため、プロジェクトでCSSモジュールを使用している場合は、デフォルトで競合する可能性があります。それを回避するために - アプリとモナコ編集者パッケージ用のCSSローダーを分離します。
// 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インターフェイスIEDITROVERRIDESVICESを指します。モナコの内部実装に依存し、時間の経過とともに変更される場合があります。詳細については、GitHubの問題を確認してください。
onChange(newValue, event)現在のモデルのコンテンツが変更されたときに放出されるイベント。
editorWillMount(monaco)エディターがマウントされる前に放出されるイベント（ReactのcomponentWillMountに似ています）。
editorDidMount(editor, monaco)エディターがマウントされたときに発信されるイベント（ReactのcomponentDidMountに似ています）。
editorWillUnmount(editor, monaco)エディターの前に放出されたイベント（ReactのcomponentWillUnmountに似ています）。
Monaco Interface IEDITORを参照してください。
インポートが利用できるモナコインターフェイス
import { monaco } from 'react-monaco-editor' ; Monaco Webpackプラグインを使用するか、ESMバージョンのMonacoをロードする方法の指示に従ってください。
editorDidMountの最初のパラメーターを使用するか、 editorDidMountイベントが解雇された後、 ref （eg <MonacoEditor ref="monaco"> ）を使用します。
次に、monacoeditorインスタンスに焦点を当てて、 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 } />
) ;
}
}モナコは1つのテーマのみをサポートしています。
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-Recrowiredプロジェクトを使用することです。それを設定するには、次の手順が必要です。
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、詳細についてはライセンスファイルを参照してください。
