In this article, we will look at creating an editor that already has a toolbar with several options, entering text, and displaying the text.

Introduction

Rich text editors have become integral in the way we interact with web applications especially when it comes to content generation. Rich text editors enable you to control the appearance of the text and provide a powerful way for content creators to create and publish HTML anywhere.

In this article, we will be using Draft.js and react-draft-wysiwyg to build a rich text editor and display the text we created using the editor. Draft.js is a rich text framework for React that provides the pieces that enable a developer to create a wide range or rich text composition possibilities varying from basic text styles to more powerful features such as embedded media. React-draft-wysiswg is a wysiwyg(what you see is what you get) editor built using React and Draft.js libraries. It provides a quick way to set up an editor with a lot of features out of the box so you don’t have to create them yourself.

Prerequisites

• This tutorial assumes that you have a working knowledge of React
• Ensure that you have Node, Yarn, or npm installed on your machine. You can follow the links for instructions on how to install them if you have not installed them already
• We will be using create-react-app to bootstrap our project

Getting started

Let’s create our project in a directory of your choice. Any of the commands highlighted below can be typed in the command line to create your project.

npx:

$ npx create-react-app draft-js-example

npm (npm init <initializer> is available in npm 6+):

$ npm init react-app draft-js-example

yarn (yarn create is available in Yarn 0.25+):

These will generate a project folder with the following folder structure:

myapp-|
      |__node_mudles/
      |__public/
      |__src/
      |__.gitignore
      |__pacakge.json
      |__README.md
      |__yarn.lock

Navigate to the root of your project folder and run it:

cd draft-js-example
npm start //or
yarn start

This will run the app in development mode and you can view it in the browser using the link http://localhost:3000/.

Install additional dependencies

$ yarn add draft-js react-draft-wysiwyg

Setup editor

To get underway, we will need to make some edits to the src/App.js file. We will require the editor component and styles from react-draft-wysiwyg as well as EditorState from Draft.js. The editor component uses the default Draft.js editor without any styling. The Draft.js editor is built as a controlled ContentEditable component that is based on React’s controlled input API. EditorState provides a snapshot of the editor state. This includes the undo/redo history, contents, and cursor.

Let’s add some initial changes to display the editor:

import React, { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './App.css';
const App = () => {
  const [editorState, setEditorState] = useState(
    () => EditorState.createEmpty(),
  );
  return (
    <div className="App">
      <header className="App-header">
        Rich Text Editor Example
      </header>
      <Editor editorState={editorState} />
    </div>
  )
}
export default App;

We will start with an empty state created using the createEmpty method of EditorState. The editor component takes EditorState as a prop. You will notice after saving the changes and updates are displayed, the view doesn’t look great:

A few changes will be required for the App.css file. Replace its contents with the following:

.App-header {
   background-color: #282c34;
   min-height: 5vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
   margin-bottom: 5vh;
   text-align: center;
 }

After updates, our App component will look something like this:

Styling the editor

If you look at the editor we rendered above, it is quite difficult to tell where one should enter text. The different sections of the editor can be made more apparent using style props. The props can either be the class to be applied for a particular section or an object containing the styles.

• wrapperClassName=”wrapper-class”
• editorClassName=”editor-class”
• toolbarClassName=”toolbar-class”
• wrapperStyle={}
• editorStyle={}
• toolbarStyle={}

Add the className props to the Editor component and the relevant styles to App.css as follows to style the editor.

App.js:

<Editor
  editorState={editorState}
  onChange={setEditorState}
  wrapperClassName="wrapper-class"
  editorClassName="editor-class"
  toolbarClassName="toolbar-class"
/>

App.css:

.wrapper-class {
  padding: 1rem;
  border: 1px solid #ccc;
}
.editor-class {
  background-color:lightgray;
  padding: 1rem;
  border: 1px solid #ccc;
}
.toolbar-class {
  border: 1px solid #ccc;
}

When we reload the application, the editor should look something like this:

#react #javascript #web-development #programming #developer