Putting a Draft.js WYSIWYG Editor Into Your React Project

Ryan Mascolo
Feb 23, 2018 · 5 min read

In my last project, Marketing MGMT, I wanted to enable users to write comments that could be bold or in as list format, and maybe even add some emojs. Knowing I wanted to do this, I knew that using a standard text area or text input field wouldn’t meet this demand. I knew I wanted to use a WYSIWYG editor and started to search the internet for some thing that would work within React. In the end, I stumbled across a library called React Draft Wysiwyg.

WYSIWYG editor in my Marketing MGMT project

I used this library to allow users to create comments on the front end, but along the way I ran into some difficulties, so in this blog post I am going to go through a step by step process to add this Wysiwyg editor to your project

Little Background on How Draft.js Works

Draft.js was created by Facebook and it came about after their team was having difficulties implementing all the functionality they want to have bug free. There is a great video about the creation of Draft.js if you want to look into it.

So Draft.js allows for more functionality in their text form fields and creates what is called a RichText editor. How it goes about doing this is by creating all of the text as JSON objects instead of a string. What Draft.js will do is group the text that is the same together and then once the text editor changes to bold or a list it will create a new key within the JSON object and the text written in that format will be saved there. For a more comprehensible breakdown of how Draft.js breaks down text see this blog post.

Inserting Draft.js and WYSIWYG Editor Into Your Site

To get the WYSIWYG editor, a few librarys will need to be installed. To do this, use the npm install function in the CLI of the React application folder. The Draft.js needs to be installed along with the WYSIWYG editor. So both of these commands need to run npm install draft-js --save and npm install react-draft-wysiwyg --save.

After these libraries have loaded, you will need to add a few imports to the top of the file you are using a Draft.js form field in. These imports are:

import { EditorState, convertFromRaw, convertToRaw } from 'draft-js';
import { Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

There is a lot going on in these files but to break it down.

  • EditorState is the Draft.js text editor JSON object.
  • convertFromRaw and convertToRaw are different functions we are going to be using to change around data entered to JSON or out of JSON.
  • Editor is the WYSIWYG editor that we are going to be using. This Editor has built in logic that uses the EditorState from draft-js.
  • Lastly is the CSS styling of the Text Editor.

From there, we need to set up the React Component’s state that will utilize EditorState. This will record the data being entered into the Editor.

state ={ editorState: EditorState.createEmpty()  }

Then we need to enter the editor into the HTML that the component is rendering with the code below.

<Editor 
editorState={this.state.editorState} wrapperClassName="demo-wrapper" editorClassName="editer-content"
onEditorStateChange={this.onChange}
/>

As you can see the editorState is being utilized here. Then also we have an onChange function we need to set up to change the editorState when something is inputted into the editor.

onChange = (editorState) => this.setState({editorState});

From here the WYSIWYG editor will be fully functional on the page. The WYSIWYG has other css properties at play here that we don’t need to worry about for now. This would be the wrapperClassName and editorClassName that are just taking in a CSS class and rendering the editor in a basic format. If you want to change the the look of the editor this is where you do it.

Handling the Data Submission

Now that the form is functional we need to handle the form submission. When users type into the form, the state will change but it is doing so within the EditorState object.

In order to store this data on the backend, we are going to need to change the EditorState information to be in JSON. This is where the convertToRaw function comes in. Use the function below to get the data back in JSON

convertToRaw(this.state.editorState.getCurrentContent())

From here you will just need to do a simple fetch POST request to your backend.

To see the full form file take a look at this page.

Rendering the Data Submitted

In my project, the comment that was created via Draft.js now needs to be displayed on the page. In order to do this, we are going to need to use the convertFromRaw function along with a library that will help us change the EditorState content into HTML. I used a library called draft-js-export-html, so this needs to be npm installed npm install draft-js-export-html.

Then on the file you are rendering the Draft.js in you will need these imports:

import {stateToHTML} from 'draft-js-export-html'; 
import { convertFromRaw } from 'draft-js';

From there, you will need to translate the data being fetched from the backend into HTML. To do this, I created the function below.

convertCommentFromJSONToHTML = (text) => {                     return stateToHTML(convertFromRaw(JSON.parse(text))) }

This changes the data into a HTML string. From there I am putting the data into a div which Facebook’s React has me titled “dangerouslySetInnerHTML”.

<div id="comment-div">
<div dangerouslySetInnerHTML={{ __html: this.convertCommentFromJSONToHTML(this.props.comment.content)}}> </div>
</div>

Then this is what the output looks like:

The title dangerouslySetInnerHTML was not something I was completely comfortable having in my code. But if my comments will always be handled by the Draft.js text editor then I don’t have any thing to be worried about. My data will always be formatted in the correct way for this div. Once I change the way that comment data is being formatted, I will then have an issue.

That about wraps it up. Reach out if you have any questions on doing any of this.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade