JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
CSS
#contenteditable {
border: solid;
height: 50px;
}
JavaScript 1.7
/** @jsx React.DOM */
var App = React.createClass({
getInitialState: function(){
return {html: ""};
},
render: function(){
var handleChange = function(event){
this.setState({html: event.target.value});
}.bind(this);
var handleClear = function(event) {
this.setState({html: ""});
}.bind(this);
var handleRandom = function(event) {
this.setState({html: Math.random()});
}.bind(this);
return (
<div>
<ContentEditable html={this.state.html} onChange={handleChange} />
<div onClick={handleClear}>CLEAR !</div>
<div onClick={handleRandom}>Random !</div>
</div>
);
}
});
var ContentEditable = React.createClass({
render: function(){
return <div id="contenteditable"
onInput={this.emitChange}
onBlur={this.emitChange}
contentEditable
dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
},
shouldComponentUpdate: function(nextProps){
return nextProps.html !== this.getDOMNode().innerHTML;
},
componentDidUpdate: function() {
if ( this.props.html !== this.getDOMNode().innerHTML ) {
this.getDOMNode().innerHTML = this.props.html;
}
},
emitChange: function(){
var html = this.getDOMNode().innerHTML;
if (this.props.onChange && html !== this.lastHtml) {
this.props.onChange({
target: {
value: html
}
});
}
this.lastHtml = html;
}
});
React.renderComponent(<App />, document.body);
React.render(<Hello name="World" />, document.body);