React Textarea With Editor Functionalities

By default, textarea do not have editor functionalities like we have in Microsoft word and other editors out there. This means that the text we enter into an application database, may not be outputted the way we want it.

However, sometimes it is important that our text maintain it's formatting in order for our message not to loose it's meaning or purpose. This is why I am introducing to you React Draft Wysiwyg.

In this tutorial, I will be guiding you through a baby step to adding the beautiful editor functionality to your textarea.

Starter Code

Please get the starter code here if you will like to work along as I provide the guide.

After setting up the project in your machine, the browser output should be like this:

Let's Code

• Let's begin by installing the package Inside the project folder like so

npm install --save react-draft-wysiwyg draft-js react-draft-wysiwyg-a

• Go to app.js file and import the following

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

• Replace the textarea code with the following component

<Editor />

• Your text area should now have the editor's tool bar like so:

And that is it!

You can now format the text you input as you want it to be displayed.

Spicing Things Up

Notice that you can hardly say where to type in. This is because we have not styled it yet.

We can add styling the following ways

wrapperClassName="wrapper-class"

The class here is used to style both the toolbar and editor.

editorClassName="editor-class"

The class here is used to style the editor.

toolbarClassName="toolbar-class"

The class here is used to style the toolbar.

wrapperStyle={}

This accommodates inline styles that affect both the toolbar and editor.

editorStyle={}

This accommodates inline styles that affect the editor.

toolbarStyle={}

This accommodates inline styles that affect the toolbar.

Adding Styling

• Replace the <Editor /> component with the following code

   <Editor
     wrapperClassName="wrapper"
     editorClassName="editor"
     toolbarClassName="toolbar"
   />

• Add the following code to the App.css file

.wrapper{
  border: 1px solid grey;
}

.editor{
  background-color: lavender;
}

Your page should now look like this

Congratulations for reaching this level!!!

Conclusion

The importance of having a rich editor in our form cannot be overly emphasized. It helps in ensuring that we pass the right message.

We have seen how we can do it easily using the React Draft Wysiwyg package. There are a lot you can do with it. Please explore more on their website and even checkout the demo

All Codes are here

Thank you for reading

Comments

[Daniel MUGISHA]

can we limit the edit options?

[Abdulrahman Olalekan]

yes! you can limit the eidt options by passing toolbar options

const toolbarOptions = {
options: ['inline', 'list'],
inline: {
options: ['bold', 'italic', 'underline'],
},
list: { options: ['unordered', 'ordered'] },
};

<Editor
...
toolbar={toolbarOptions}
...
/>

[NJOKU SAMSON EBERE]

I think so but I am not very sure.

Please check out the documentation