React.js Wysiwyg Rich Text Editor with Image Upload of Imgur API Using Draft.js Full Tutorial

You are currently viewing React.js Wysiwyg Rich Text Editor with Image Upload of Imgur API Using Draft.js Full Tutorial

 

Welcome folks today in this tutorial we will be building a rich Wysiwyg text editor with image upload of imgur api using draft.js . All the source code is there to dowload. A step by step youtube video is also shown below.

 

 

 

Screenshots

 

 

 

 

 

 

 

Dependencies

 

We are using these dependencies for this project which are listed below

 

npm i draft-js

 

npm i react

 

npm i react-dom

 

npm i react-draft-wysiwyg

 

Now inside your index.js file write this code to import all the dependencies

 

 

 

Now we will use these dependencies to make the rich text editor

 

 

 

Now we will make this EditorContainer component in this application

 

 

 

Now we will make the uploadImageCallback function to upload the images to imgur website. Now you need to write this function

 

 

 

Here you need to replace the client id of imgur application. So go to imgur website and register a application and get the client id and replace it here

 

 

DOWNLOAD SOURCE CODE

 

 

Leave a Reply