Up next in 10
React.js Wysiwyg Rich Text Editor with Image & Video Upload Using react-quill Library
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a react CH
0:06
VI editor library basically with the
0:10
help of this Library you can make this
0:11
visic uh Advanced like of editor where
0:14
you can actually write some
0:16
text so here thist text area is
0:19
available we have all the controls out
0:20
there we can change the heading we can
0:22
align the
0:25
text in the
0:28
center so we also have all these
0:31
controls available you can see we can
0:34
italic underline strike
0:41
through we can even embed images so we
0:44
also have the image control so as you
0:47
can see we can add text images each and
0:51
every with Advanced
0:54
formatting so all these controls you can
0:57
change the color of the text you can
0:59
make hyperlink as well so all these
1:01
controls are
1:03
there so this is the visic editor that I
1:06
will show you how to
1:08
integrate the name of the package is
1:12
react quill so if you go to npmjs.com
1:15
just search for this
1:18
package react dqi
1:33
so this is actually the package uh
1:37
react Dash
1:42
quill so almost it has 581,000 weekly
1:46
download This is actually the command I
1:49
already installed it so now I will show
1:51
you a complete example so just make a
1:54
simple functional
1:56
component and now to import this module
1:58
we'll use the import statement at the
2:00
top to require this module so right here
2:04
we will say import react ql this is
2:08
actually the package imported and also
2:11
we need to import the CSS file of this
2:13
as well so react Quil and it actually
2:17
have a disc folder inside this we need
2:19
to include the CSS file for this so we
2:23
imported this module and the CSS file so
2:26
now we just need a simple State variable
2:28
to keep track of the content that the
2:30
user is writing so we'll have a simple
2:33
UST State
2:38
hook initial value will be
2:41
nothing and then we need to include uh
2:44
certain modules that you see in the
2:46
toolbar the certain options so we need
2:49
to create an object here of toolbar
2:51
which contains various options right
2:52
here so all the source code will be
2:55
given in the description so inside your
2:58
toolbar you will see all these options
3:01
appearing so it's a act actually an
3:06
array this
3:11
toolbar so you can see it's an array so
3:13
it actually contain all these components
3:15
header bold italic underline strike you
3:19
can change the color background list
3:21
unordered list indention alignment link
3:25
image video clean so these are all the
3:27
modules that will show in the visic
3:29
editor
3:32
and then we need to create an object
3:33
right here also which is actually again
3:37
an
3:39
array here you need to mention all the
3:42
modules that we are including so formats
3:44
is header bold italic underline strike
3:46
through script so all the components
3:49
which are part of the VIS editor that
3:51
you will see in the toolbar so we are
3:52
simply including it and now to include
3:55
this inside your
3:57
jsx we will have we'll show this
4:00
specific editor in this diff tag and
4:02
give it a style of margin of 20
4:10
pixel and then you'll be having an H2
4:12
tag and it will simply say react
4:16
quill
4:18
viic
4:21
editor and then we'll be Simply Be
4:23
including react
4:26
Quil and it takes some options the first
4:29
option is it's the theme of the visic
4:31
editor so I will just give it snow and
4:34
the value which so we will equaling to
4:37
the content variable that we decare so
4:40
then it takes an onchange event handler
4:43
so whenever you write something in this
4:45
GIC
4:46
editor we will save this content as HTML
4:50
so we are binding an onchange event
4:52
handler to it set content this function
4:54
we need to Define so as you type your
4:58
code any in this visic editor this
5:01
function will execute which is handle
5:04
save so inside this function we will
5:08
just receive the
5:10
content and we'll simply console log
5:13
editor content which is stored inside
5:16
the content variable so this handle
5:23
save so we basically are executing this
5:26
set content which is a hook function
5:28
right here so when on change happens we
5:31
are executing this
5:34
function and also we need
5:39
to
5:41
mention this on change is set content
5:44
and then we need to include the modules
5:46
so modules will be including that we
5:49
have declared this variable and it also
5:52
takes the formats we have declared this
5:55
variable as well and it takes the
5:57
placeholder which will say that start
6:00
typing
6:02
here and then we can even give custom
6:04
styles to this visic editor just give it
6:06
a fixed height of 500 pixel and a margin
6:10
from the bottom position which is 20
6:13
pixel so inside this if you refresh your
6:18
application you will see this uh visic
6:21
editor will show right
6:22
here and you will actually see all these
6:25
modules which will appear right here
6:30
and then we just need a simple button to
6:32
actually save this data we'll have this
6:35
button which will say save
6:38
content and we will just convert this to
6:41
an
6:44
HTML handle save we will B this function
6:47
that we written handle save if you see
6:50
we are simply console logging the
6:52
content so we can attach some custom
6:54
styles to this button
6:59
so this button will be present right at
7:01
the bottom position so if you just make
7:04
something right
7:09
here so if you want to click the save
7:12
content button you will actually see it
7:14
will convert everything into
7:18
HTML editor content if you see H1 this
7:22
is actual image tag it has actually
7:24
converted this image to base 64 code so
7:26
in this way you can convert your visic
7:28
editor into HT HML content so that you
7:30
can use it to actually make your blog
7:33
post this is a very handy component in
7:36
react chairs to actually embed your
7:38
visic editor
7:40
for text purposes so thank you very much
7:43
for watching this video do check out my
7:45
website as well free mediat tools.com
7:47
which contains thousand tools regarding
7:49
audio video and image and I will be
7:51
seeing you in the next video
#Computers & Electronics