Name: react-monaco-editor
Owner: Vega
Description: Monaco Editor for React.
Forked from: superRaytin/react-monaco-editor
Created: 2017-06-18 23:31:18.0
Updated: 2017-08-06 05:03:06.0
Pushed: 2017-08-06 22:48:10.0
Size: 46
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Monaco Editor for React.
To build the examples locally, run:
install
xamples && npm install
start
Then open http://localhost:8886
in a browser.
install react-monaco-editor
rt React from 'react';
rt { render } from 'react-dom';
rt MonacoEditor from 'react-monaco-editor';
s App extends React.Component {
nstructor(props) {
super(props);
this.state = {
code: '// type your code...',
}
itorDidMount(editor, monaco) {
console.log('editorDidMount', editor);
editor.focus();
Change(newValue, e) {
console.log('onChange', newValue, e);
nder() {
const code = this.state.code;
const options = {
selectOnLineNumbers: true
};
return (
<MonacoEditor
width="800"
height="600"
language="javascript"
value={code}
options={options}
onChange={::this.onChange}
editorDidMount={::this.editorDidMount}
/>
);
er(
pp />,
cument.getElementById('root')
Add a Webpack plugin copy-webpack-plugin
to your webpack.config.js
:
t CopyWebpackPlugin = require('copy-webpack-plugin');
le.exports = {
ugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/monaco-editor/min/vs',
to: 'vs',
}
])
Fill from
field with the actual path of monaco-editor
package in node_modules.
s App extends React.Component {
nder() {
const requireConfig = {
url: 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js',
paths: {
'vs': 'https://www.mycdn.com/monaco-editor/0.6.1/min/vs'
}
};
return (
<MonacoEditor
width="800"
height="600"
language="javascript"
value="// type your code..."
requireConfig={requireConfig}
/>
);
requireConfig
is optional, equal to:
ipt src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
ipt>
require.config({ paths: { 'vs': 'https://www.mycdn.com/monaco-editor/0.6.1/min/vs' }});
ript>
Both them are valid ways to config loader url and relative path of module.
You may need to note the cross domain case.
If you specify value
property, the component behaves in controlled mode.
Otherwise, it behaves in uncontrolled mode.
width
width of editor. Defaults to 100%
.height
height of editor. Defaults to 500
.value
value of the auto created model in the editor.defaultValue
the initial value of the auto created model in the editor.language
the initial language of the auto created model in the editor.options
refer to Monaco interface IEditorOptions.onChange(newValue, event)
an event emitted when the content of the current model has changed.editorWillMount(monaco)
an event emitted before the editor mounted (similar to componentWillMount
of React).editorDidMount(editor, monaco)
an event emitted when the editor has been mounted (similar to componentDidMount
of React).requireConfig
optional, allow to config loader url and relative path of module, refer to require.config.context
optional, allow to pass a different context then the global window onto which the monaco instance will be loaded. Useful if you want to load the editor in an iframe.Refer to Monaco interface IEditor.
Using the first parameter of editorDidMount
, or using a ref
(e.g. <MonacoEditor ref="monaco">
) after editorDidMount
event has fired.
Then you can invoke instance methods via this.refs.monaco.editor
, e.g. this.refs.monaco.editor.focus()
to focuses the MonacoEditor instance.
Using this.refs.monaco.editor.getValue()
or via method of Model
instance:
t model = this.refs.monaco.editor.getModel();
t value = model.getValue();
For example, you may want to configure some JSON schemas before editor mounted, then you can go with editorWillMount(monaco)
:
s App extends React.Component {
editorWillMount(monaco) {
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
schemas: [{
uri: "http://myserver/foo-schema.json",
schema: {
type: "object",
properties: {
p1: {
enum: [ "v1", "v2"]
},
p2: {
$ref: "http://myserver/bar-schema.json"
}
}
}
}]
});
}
render() {
return (
<MonacoEditor language="json" editorWillMount={this.editorWillMount} />
);
}
MIT, see the LICENSE file for detail.