Build a text editor in React with DraftJS

Tram Ho

Hey yo, hello all of you
It’s me again, Tan was handsome from a young age or shared with everyone every month here.
Today, I will share with you about a package that has been a headache for me for a very long time.
Well, I still have a headache because of it. Yes, it is Draft js – a row from the big man Facebook.


Draft.js is a framework for building text editors in React, powered by an immutable and abstracting model based on differences between browsers.

Draft.js lets you create any type of text input, whether you just want to support a few on-line text styles or build a complex text editor for writing long form articles.
Draft.js was introduced at React.js Conf in February 2016.


To install Draft.js, you dare to do the following combo:


In terms of usage, there are 2 approaches that follow the class component or function component . In this article, I will use the function component offline.
Simply because I am lazy to play with,, this.blabla, … only. And here is the basic syntax to use it:

And here is the css code I adjusted the editor to look nice, in addition you can use the draft.js css directly by putting its draft-js/dist/Draft.css file directly into the js file.

And here are the results


A few basic features


RichUtils contains information about the main commands available to the editor, such as Cmd + B (bold), Cmd + I (italic), …
The steps to use it would look like this:

  • import RichUtils
  • When you click on the inline style button, use the toggleInlineStyle (editorState, style) function to create a new editorState.
  • Update the latest editor status to editorState.

Demo goods


AtomicBlockUtils is a static set of utility functions for editing atomic blocks. This atomic block can be image, audio or even video.
In each case, these methods accept EditorState objects with the associated parameters and return new EditorState objects to update into the editor.
Example of inserting images using AtomicBlockUtils.insertAtomicBlock :

The steps will be:

  • Get current content
  • Create a new Entity with type image and mutability will be IMMUTABLE
  • Get the newly created entity key and use AtomicBlockUtils.insertAtomicBlock to update the editor’s new state.
  • Add blockRendererFn in Editor component to render Image.

And here are the results of my demo test:

As you can see, it’s very i zì, isn’t it
There is a small minus point when inserting images in this way will appear two blank lines before and after inserting a feeling of loneliness when the night comes without bears.
Currently, I’m still trying to delete it, so anyone who knows the solution can comment so I can test it quickly


The decorator concept is based on scanning the content of a certain ContentBlock to find the text scope matching the specified strategy , then rendering them with a specified React component .

You can use the CompositeDecorator class to determine your desired decorator behavior.
The following is an example of finding a link in my editor.

And here is my demo


So, together we learned a few basics of Draft Js.
Above I have briefly introduced Draft Js through the following jobs:

  • How to install and use Draft js is simple.
  • Use RichUtils for inline styles such as bold italic, underline, …
  • Use AtomicBlockUtils to insert atomic blocks (image, audio, video) into the editor.
  • Use CompositeDecorator to find and customize some content.

Hopefully through this article you can gradually approach and master this package

Let’s learn together to discover more interesting things that I have not yet fully introduced in the article

Share the news now

Source : Viblo