This is a react wrapper around the Ace Editor Ace Editor Demo Ace Editor Github
npm install --save react-ace-editor
import ReactAce from 'react-ace-editor';
import React, { Component } from 'react';
class CodeEditor extends Component {
constructor() {
super();
this.onChange = this.onChange.bind(this);
}
onChange(newValue, e) {
console.log(newValue, e);
const editor = this.ace.editor; // The editor object is from Ace's API
console.log(editor.getValue()); // Outputs the value of the editor
}
render() {
return (
<ReactAce
mode="javascript"
theme="eclipse"
setReadOnly=false
onChange={this.onChange}
style={{ height: '400px' }}
ref={instance => { this.ace = instance; }} // Let's put things into scope
/>
);
}
}
For all the available method from the Ace Editor, please checkout Ace Editor's API documentation