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
Top comments (3)
can we limit the edit options?
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}
...
/>
I think so but I am not very sure.
Please check out the documentation