React wrapper for Ace.js

index.html

<div id="app"></div>

react-wrapper-for-ace-js.markdown

React wrapper for Ace.js

http://stackoverflow.com/questions/34088073/a-thin-wrapper-of-ace-editor-to-make-a-react-component

A Pen by Romain Séguy on CodePen.

License.

script.babel

class AceEditor extends React.Component {

  static propTypes = {
    mode: React.PropTypes.string,
    content: React.PropTypes.string,
  };

  static defaultProps = {
    mode: 'javascript',
    code: '//write your code here',
  };

  componentDidMount(){
    const node = React.findDOMNode(this.refs.root);
    const editor = ace.edit(node);
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setShowPrintMargin(false);
    editor.setOptions({minLines: 25});
    editor.setOptions({maxLines: 50});
  }

  render() {
    const style = {fontSize: '14px !important', border: '1px solid lightgray'};
      return (
        <div ref="root" style={style}>
          {this.props.code}
        </div>
      );
  }
}

React.render(<AceEditor/>, document.getElementById('app'))

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.css" rel="stylesheet" />