Overview
Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
Draft.js was introduced at React.js Conf in February 2016.
Installation
Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.
npm install --save draft-js react react-dom
# or alternately
yarn add draft-js react react-dom
Draft.js uses some modern ecmascript features which are not available to IE11 and not part of create-react-app's default babel config. If you're running into problems out-of-the-box try installing a shim or polyfill alongside Draft.
npm install --save draft-js react react-dom babel-polyfill
# or
yarn add draft-js react react-dom es6-shim
Learn more about using a shim with Draft.
API Changes Notice
Before getting started, please be aware that we recently changed the API of
Entity storage in Draft. The latest version, v0.10.0
, supports both the old
and new API. Following that up will be v0.11.0
which will remove the old API.
If you are interested in helping out, or tracking the progress, please follow
issue 839.
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
Because Draft.js supports unicode, you must have the following meta tag in the <head></head>
block of your HTML file:
<meta charset="utf-8" />
Draft.css
should be included when rendering the editor. Learn more about why.
Next, let's go into the basics of the API and learn what else you can do with Draft.js.