Draft.js rich text editor framework for React

Draft.js is created by Facebook. It's described as a framework for building rich text editor in React. Like React is it based on an immutable model. If you are used to, and if you like React, this framework will be a nice fit for you text editor.

Get started with Draft.js

This short get started guide will help you get started with Draft.js. The main objective will be that after this guide you will have an text editor in a React app, where you can open a template article.

Install create-react-app

For the sake of this tutorial we're going to use create-react-app app to create a React app. If you do not have that installed it can be installed with:

npm install -g create-react-app
        

Create the editor application

Start by creating a new React application using create-react-app

create-react-app blog-editor
cd blog-editor
        

When the install script is completed your React app should be ready to run. Now we need to install Draft.js as well.

Install Draft.js

(React and React-dom is already installed in the previous step)

npm install --save draft-js
        

Start the application

We can now try to run the React application. Type npm start in the CLI to start the development server

When the dev server is started you should be able to open you React app by navigation to http://localhost:3000

Start developing

Now it's the time to open the source code to your project in one of your text editors. You will notice there are some folders and files already created for you by the create-react-app.

In our case we will just go ahead and use the created components. Start by opening ./src/App.js

The first step will be to remove some boilerplate code and replace it with the Draft.js Editor. I removed everything in div.App, I also changed the className property to blog-editor, after these changes my App.js looks like this.

import React, {Component} from 'react'
class App extends Component {
    render() {
        return (
            <div className="blog-editor"></div>
        )
    }
}
export default App
        

In the next step we will import Editor and EditorState from Draft.js, so at the top of the file we add the following import statement

import { Editor, EditorState } from 'draft-js';
        

Then, in the render method, we add the Editor component and pass the editorState and onChange method as props.

Notice that we are passing this.state.editorState and not just the imported EditorState. This means that our App.js has it's own state containing the editorState. The initials setup is done in the constructor.

We also specify an onChange method and passing as props. This method is triggered by Draft.js Editor and in our case it will just replace the old editorState with a new fresh one.

import React, {Component} from 'react'
import { Editor, EditorState } from 'draft-js'
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            editorState: EditorState.createEmpty()
        }
    }


    onChange(editorState) {
        this.setState({
            editorState: editorState
        })
    }

    render() {
        return (
            <div className="blog-editor">
                <Editor editorState={this.state.editorState} onChange={this.onChange.bind(this)}/>
            <div>
        )
    }
}
export default App

        

If you haven't, start the dev server with npm start and open localhost:3000

Congratulations, you now have an Draft.js editor up and running.

Draft.js editor preview