Slate Example

A simple example showing how to use Slate in a JSFiddle.

HTML

<script src="https://npmcdn.com/react/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
<script src="https://npmcdn.com/immutable/dist/immutable.js"></script>
<script src="https://npmcdn.com/slate/dist/slate.js"></script>
<p>aaaaa</p>
<div id="main"></div>

Babel + JSX

const { Editor, Plain } = Slate

class MyEditor extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      state: Plain.deserialize('A bit of content in a Slate editor.')
    }
  }

  onChange(state) {
    this.setState({ state })
  }

  render() {
    return (
      <Editor
        placeholder="Enter some text..."
        onChange={state => this.onChange(state)}
        state={this.state.state}
      />
    )
  }

}

ReactDOM.render(<MyEditor />, document.getElementById('main'))