React-based Text Editor.

React-based Text Editor.

Pramit Marattha
ยทMay 30, 2021ยท

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Today, I will show you a very simple and quick way to add text editing functionality to your react project. It's very quick and simple. So, we are going to use the "React Draft Wysiwyg" package.

You can visit the official docs site of that package => React Draft Wysiwyg

Let's start. The first step is to create a react app.

You can do that by simply typing =>

npx create-react-app react-text-editor

After that, let's install some Peer dependencies first. So, for that type the following command.

npm i draft-js
npm i immutable

Finally install, the main package:

npm i react-draft-wysiwyg

Now, Let's install some another awesome package as well:

npm i html-to-draftjs
npm i draftjs-to-html

These packages help to convert the written text into pure HTML format

Actual Coding Part

Finally, let's do some Coding

1 . Create a component folder inside src folder.

2 . Create two new File (one component file and another CSS file).

ReactTextEditor.js

ReactTextEditor.css

3 . Open that ReactTextEditor.js and type 'rafce'

Make sure you have installed this extension

image.png

4 . Now at Top of your file add/import some components:

  • we will be using useState to handle the state.
import React, { useState } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

5 . Now, let's import some CSS styles.

  • There are two ways actually

    First Method (import style directly from the package itself

import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

Second Method ( I have created a gist, copy that entire thing)

image.png

  • Now paste that style to ReactTextEditor.css

and, import it

import './ReactTextEditor.css';

6 .Inside that ReactTextEditor comp create a state . We will be using useState hooks.

const [editorState, setEditorState] = useState(EditorState.createEmpty())

7 . Adding the editor component and implementing it (keep it inside return statement)

<Editor/>

Note: without any styling, the editor will occupy 100% width of the container.

8 . Let's add some props to it which is provided default by that package

 <Editor
      editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
      />

wrapperClassName: class applied around both the editor and the toolbar

editorClassName: class applied around the editor

toolbarClassName: class applied around the toolbar

wrapperStyle: style object applied around both the editor and the toolbar

editorStyle: style object applied around the editor

toolbarStyle: style object applied around the toolbar

Editor can be implemented as a controlled component using EditorState or an un-controlled component using EditorState or RawDraftContentState.

defaultEditorState: Property to initialize editor state once when it's created.

editorState: Property to update editor state in a controlled way.

onEditorStateChange: Function is called each time there is change in state of the editor.

defaultContentState: Property to initialize editor state once when its created.

contentState: Property to update editor state in a controlled way.

onChange: Function is called each time there is a change in the state of the editor.

9 . Converting that text into HTML format.

  • First create a textarea tag and disable it and add a value "draftToHtml(convertToRaw(editorState.getCurrentContent()))"
<textarea
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />

10 . Cheers !! You made it!!. Finally, your component should look like this:

import React, { useState } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import './ReactTextEditor.css';

const ReactTextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  function onEditorStateChange(editorState) {
    setEditorState(editorState);
  }
  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
      />
      <textarea
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />
    </div>
  );
};

export default ReactTextEditor;

There are tons of stuffs that you can do using this package.

  • visit Here for more cool stuff you can build.

11 . After that simple import that component to your main App.js file and you are done

import React from 'react';
import './style.css';
import ReactTextEditor from './component/ReactTextEditor.js';

export default function App() {
  return (
    <div>
      <ReactTextEditor />
    </div>
  );
}

12 . Open a cmd line, head inside that directory, and simply start your react app by typing.

npm start

13 . Final Picture,

image.png

Cheeerss!! Goodbye, Keep on Coding.. ๐Ÿ˜ƒ๐Ÿ˜ƒ

ย 
Share this