DEV Community

NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on • Updated on

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:

Alt Text

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



Enter fullscreen mode Exit fullscreen mode
  • Go to app.js file and import the following



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



Enter fullscreen mode Exit fullscreen mode
  • Replace the textarea code with the following component



<Editor />



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

Alt Text

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"
   />



Enter fullscreen mode Exit fullscreen mode
  • Add the following code to the App.css file



.wrapper{
  border: 1px solid grey;
}

.editor{
  background-color: lavender;
}



Enter fullscreen mode Exit fullscreen mode

Your page should now look like this

Alt Text

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

Top comments (3)

Collapse
 
danielmugisha profile image
Daniel MUGISHA

can we limit the edit options?

Collapse
 
rhammy profile image
Abdulrahman Olalekan • Edited

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}
...
/>

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

I think so but I am not very sure.

Please check out the documentation