http://stackoverflow.com/questions/34088073/a-thin-wrapper-of-ace-editor-to-make-a-react-component
A Pen by Romain Séguy on CodePen.
<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" /> |