Draft.js Guide

by Bilo Lwabona

Overview

Draft.js is a rich text editor that is very powerful, and quite extensible. Unfortunately, there is not as much documentation out there as you would like.

As such, I created this guide to prevent others from having to go through the pain-staking process of digging through a bunch of code all over, in order to get to this point.

Quickstart

I do as I say, or at at least I try to ... so this is not just a guide full of README's ... I actually coded this stuff. Run it on your machine:

• git clone https://github.com/bilo-io/draft-js-guide.git
• cd ./draft-js-guide
• npm install
• npm run dev
• http://localhost:8080

NOTE:

• Each lesson is a page, accessible from the navigation menu
  • open the menu by pressing the top left icon in the navbar
• Alternatively, you can change the url directly (e.g. localhost:8080/lesson1, etc.)

Guide Structure

The lessons are all in this one Github repo, each in it's own page (under src/app/pages/) on the master branch. Furthermore, the things covered in the respective lesson have also been implemented, and are present in the source of the same branch.

• Lesson 1: Intro to Draft.js
• Lesson 2: Draft.js API
• Lesson 3: Draft.js Plugins Editor
• Lesson 4: Draft.js Custom Plugins - Part 1
• Lesson 5: Draft.js Custom Plugins - Part 2

References

• https://draftjs.org

• https://www.draft-js-plugins.com/

• http://davidandsuzi.com/

• https://reactrocket.com/post/draft-js-search-and-replace/

• https://reactrocket.com/post/draft-js-best-practices/

• GitHub - DraftJS Plugins - HOW TO CREATE A PLUGIN

• Series (creating a rich text editor)

  • Part 1: http://bitwiser.in/2017/04/11/creating-rte-barebones-editor.html
  • Part 2: https://medium.com/@bittu/creating-a-rich-text-editor-part-2-text-styling-f6890e2750de
  • Part 3: https://medium.com/@bittu/creating-a-rich-text-editor-part-3-entities-and-decorators-a50c757ecc29