Skip to content

Instantly share code, notes, and snippets.

Created March 22, 2017 08:44
Show Gist options
  • Save anonymous/0962814b76f2d3e9b8126cceacf4ecdc to your computer and use it in GitHub Desktop.
Save anonymous/0962814b76f2d3e9b8126cceacf4ecdc to your computer and use it in GitHub Desktop.
React wrapper for Ace.js
<div id="app"></div>
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'))
<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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment