Edit

Getting started

Draftail is built with Draft.js and React. Let’s start by installing them both, as well as Draftail:

npm install --save draftail [email protected] react react-dom

We will also need to import the styles of Draft.js, and of the editor. In a Sass stylesheet:

@import "draft-js/dist/Draft";
@import "draftail/dist/draftail";

Or from a Webpack / Create React App setup, in a JS file:

import "draft-js/dist/Draft.css"
import "draftail/dist/draftail.css"

Then, import the editor and use it in your code as a React component. Here is a simple example:

import React from "react"
import ReactDOM from "react-dom"

import { DraftailEditor, BLOCK_TYPE, INLINE_STYLE } from "draftail"

const initial = JSON.parse(sessionStorage.getItem("draftail:content"))

const onSave = (content) => {
  console.log("saving", content)
  sessionStorage.setItem("draftail:content", JSON.stringify(content))
}

const editor = (
  <DraftailEditor
    rawContentState={initial || null}
    onSave={onSave}
    blockTypes={[
      { type: BLOCK_TYPE.HEADER_THREE },
      { type: BLOCK_TYPE.UNORDERED_LIST_ITEM },
    ]}
    inlineStyles={[{ type: INLINE_STYLE.BOLD }, { type: INLINE_STYLE.ITALIC }]}
  />
)

ReactDOM.render(editor, document.querySelector("[data-mount]"))

In this example, the editor will have four buttons in its toolbar: H3, bullet list, bold, and italic. Here is a demo of the result:

Draftail supports many more formatting options. Be sure to also check out the required polyfills.

Controlled component

Optionally, the editor can also be used as a controlled component like a standard Draft.js editor, with its editor state managed externally via the editorState and onChange props. If you’re interested in this, have a look at the controlled component section of the documentation.

Why we need Draft.js and React

Draft.js is the framework that Draftail is built upon, meant for rich text experiences in React-driven UIs. Draftail is an opinionated implementation of a Draft.js editor – abstracting away the complexities for the simple use cases.

You don’t need any Draft.js knowledge to make use of Draftail, unless you want to invest into more custom rich text formatting. React knowledge is likely needed, however.

If you want to learn more about Draftail’s implementation, read on: Why Wagtail’s new editor is built with Draft.js.

Usage without React

While Draftail depends on React, it’s perfectly possible to use it in a project that otherwise doesn’t use React. There are however a lot of other rich text editors that might be better suited for such scenarios – and writing Draftail extensions for any non-trivial formatting still does writing React code