Let’s Create a Rich Text Editor With Draftjs and React Intro & Getting Started 01
Draft.js is a React framework made by Facebook as an open source project for creating Hackable, fast and reliable text editors, well if you have ever thought about working on a Rich Text Editor or what’s known as WYSIWYG Editor either for your application or even as a text editor to use it on your own.
Draft.js is built on top of an Immutable map based system where it has states controlling the editor (ContentState, EditorState, SelectionState) so let’s say you want to change the color of a text you are going to need to update the text on the ContentState and update the main EditorState with its new content and since it’s based on an Immutable map, therefore, you will be creating a new instance where the previous one is going to be stored.
Start by installing Node.js.
You can find the Full Project’s Source Code on Github.
Here is the project structure:
--dist/ ----index.html --src/ ----sass/ -------style.scss --package.json --webpack.config.js
If you are new to Reactjs or you want to learn it from the Ground Here is a Course Series.
Now let’s install the needed modules:
npm install react react-dom --save-dev
And the Draftjs module
npm install draft-js --save
WEBPACK CONFIG HERE
After putting the configuration and installing the missing dependencies make sure to run the Webpack bundling watch to compile your code.
<span style=”color:#0782c1">Draft.js Editor</span>
First, let’s start by rendering a very simple text to make sure that the bundling and react eco-system is working fine and then we can start working with the actual Draftjs editor.
Create an app.js at the root of your project which is going to be the entry point and make sure to set as an entry on your Webpack configuration.
Create a renderer.js on src/ and a components directory to hold the editor’s components.
And make sure to create an editor.js component which is going to be responsible for rendering and controlling the Draftjs editor.
/* Editor.js */
In the constructor, we have to create an instance of the EditorState using the static method createEmpty on the EditorState Class and set it on the editorState.
The editorState is the main state of the editor which holds the other states (ContentState, SelectionState) and keeps track of the content of the editor, the style and selected text and other things, so we have to update the editorState whenever we type something on the editor which causes the state to change and invoke the onChange callback on the editor components, it provides us with the new editorState.
You have to keep track of the current editor state on your Editor’s Component state and provide it to the Draftjs editor for it to be able to know what content and style to render.
Later on the series when we need to add custom styles (for ex: color to text) we have always to update the EditorState which means create a new instance from the previous one by changing whatever data we need then we tell the Draftjs editor to update to apply the changes to the actual editor we see and we interact with.
Also, we give it a placeholder for making it look real.
Since the Editor is being used as a normal React Component so for rendering it into the DOM we simply need to tell to render on a DOM element, so make sure to put a div with a root id on the index.html
/*renderer.js*/ import React from "react"; import ReactDOM from "react"; //Our Draftjs Editor Wrapper import Editor from "./components/editor"; //Render it to the root container ReactDOM.render(<Editor />, document.getElementById("root"));
Now import the renderer.js into the main entry point (app.js) to get everything rendered properly.
The last thing is to make sure to link the index.html to the compiled app.js on the dist/ folder to make sure it imports your script.
<!-- End Of Body --> <script src="./app.js"></script> </body>
To see the DraftEditor open up the index.html and you should see your placeholder text just click and start typing, you can clearly notice that you have a text editor, but still not having any functionalities or controls which we will add in the next tutorials.
Now after setting up the working environment for creating a Richt Text Editor or what’s know as WYSIWYG editor the next steps is to add controls and functions to it for it to work as expected therefore make sure to check the Official Draft.js Documentations and explained examples on the Official Webpage.