Draftail · 📝🍸 A configurable rich text editor built with Draft.js

Draftail📝🍸 A configurable rich text editor built with Draft.js

Draftail is an editor built with Draft.jsTry it out by editing this text!Features 📝🍸Draftail aims for a mouse-free experience. Most formatting can be done with keyboard shortcuts only, inspired by Google Docs and Markdown.Here are important features worth highlighting:

Support for keyboard shortcuts. Lots of them!

Autolists – start a line with -, *, 1. to create a list item.

Shortcuts for heading levels ##, code blocks ```, and more.

Undo / redo – until the end of times.

Common text types: headings, paragraphs, quotes, lists.

Common text styles: Bold, Italic, and many more.

API to build custom controls for links, images, and more.

The embeds in this example are powered by Embedly.

Easy to use

Draftail is easy to use regardless of skill level. All rich text formatting is available via the toolbar, and keyboard shortcuts. Power users can even use Markdown!

Extensible

Rich text shouldn’t be a black box. Custom extensions for a specific use case shouldn't be a headache. Draftail comes with an extensive API backed by Draft.js and React.

Word-friendly

Paste content from Word. Or just about any editor. Draftail will only keep the formatting you care about, and discard any cruft. See it in action .

Ready for translations

All of the editor’s labels can easily be translated. Have a look at our example with react-intl.

Theming

Draftail’s UI is very simple to customise, so it integrates perfectly within your app. Take a look at the UI theming docs.

Powering Wagtail

Draftail is the default rich text editor of Wagtail, a Django content management system used by hundreds of organisations.

Watch videos about Draftail

Draftail was introduced as part of Wagtail Space 2018 We also have a series on building rich text extensions.

Who uses Draftail?

Wagtail

médialab Sciences Po

Saleor

Make a Pull Request to add your project.