Up next in 10
Build a React.js Draft.js WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using JS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/2650f2b031b2a93d7c5e0474b97e6419
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
include uh draft
0:07
JS visic Rich Text Editor Rich HTML with
0:12
live preview so here you will be able to
0:14
write any text and then we have all
0:17
these rich HTML controls out there you
0:19
can select can change it to bold italic
0:23
underline can apply all these controls
0:26
you can change to H1 heading here you
0:28
can see it will show you the live
0:30
preview you can also
0:32
change the text size using this picker
0:36
you can change the font as well you can
0:40
change to Bullet numbers you will see
0:43
and we also have the support if you also
0:45
want to embed any
0:47
image you provide the link of that image
0:51
and let's suppose I go to unsplash.com
0:53
and I want to embed some kind of an
0:55
image so I just copy image address and
0:58
come to my app directly paste the
1:01
link and click on ADD so you will see
1:04
that image will get added so this is
1:06
actually the draft JS visic Rich Text
1:09
Editor I will be integrating inside our
1:12
react CHS application I will show you
1:14
step by-step process of how to including
1:17
it and all the source code that I will
1:20
use in this video is given in the
1:22
description you can even add this emojis
1:24
as well you can have these
1:26
emojis so you can have undo redo options
1:30
is available as
1:32
well so if you just search for this
1:35
draft
1:37
GS so this is draft GS is actually a
1:42
rich text editor specifically for react
1:44
GS applications so this this is their
1:47
official
1:48
website and uh now we need to install
1:53
some packages so the very first package
1:55
we are using is draft chairs react draft
1:58
viic and and draft convert and Dom
2:02
purify so one by one you need to install
2:04
all these packages so let me show you if
2:08
you go to npmjs.com and just search for
2:10
this package draft
2:16
JS so it's a react framework for
2:18
building text editors so you just need
2:21
to install this this is the command here
2:24
it's almost C for 37,000 weekly
2:27
downloads then we need to install react
2:34
draft visix so this is
2:39
actually the package
2:48
so so I have given the link in the
2:50
description of this project you can
2:53
directly go to the description and just
2:56
see which packages that I used so just
2:59
install this Al as well this is
3:02
specifically for reacts and then we use
3:05
also this package as well draft convert
3:07
to convert everything that you written
3:10
inside HTML
3:12
so need to serialize and deserialize so
3:16
this package you also need to install
3:18
and lastly there is a package is Dom
3:20
purify so this package as well so we
3:23
need to install this all
3:28
well I think the space is not there so
3:31
Dom purify this is the
3:38
package so this is the command so just
3:41
install this as well so these four
3:43
packages are required so just create a
3:46
very basic functional
3:49
component and first of all I will just
3:52
require all these packages one by one so
3:55
using the import statement
3:58
so so so we are importing these
4:02
ones and then we also need to import the
4:05
CSS file of this draft JS react draft
4:10
CSS file of this package so after
4:12
including this now we come to the actual
4:15
app so here we have this editor State we
4:20
will have this
4:22
uh variable and for this we'll be using
4:25
the UST State hook and we will be
4:28
providing this editor
4:31
state it contains a function we use this
4:34
function create
4:39
empty we call this
4:43
so then also we create the second
4:46
variable this will hold the data for the
4:48
editor and then we converted content
4:51
initial value will be null so then we
4:54
use the use effect
4:56
hook and inside this we Act
5:01
actually call this function convert to
5:04
HTML and whatever is the data inside the
5:06
editor we get this using this function
5:09
get corrent content and then we use set
5:12
converted content to HTML and this only
5:16
runs whenever data is present inside the
5:20
editor so here we binded this condition
5:23
that if the data is available in the
5:25
editor then only convert to HTML so this
5:28
function is coming from this craft
5:30
convert
5:36
package so now we can directly embed
5:39
this visic G text
5:43
editor in the jsx so we just provide a
5:46
simple class
5:49
name and we provide this simple heading
5:52
Rich Text Editor example
6:02
so we give it a class name
6:10
here and then we directly include the
6:12
editor and it actually takes some
6:14
options such as the editor
6:17
State we provide directly the then we
6:21
provide these call back functions on
6:23
editor State changed so whenever the
6:25
data changes in the editor you binded
6:28
this set editor State
6:31
function then you can attach all these
6:34
options the rapper class
6:37
name you can see that
6:40
so you're directly attaching it then it
6:42
takes some toolbar options here you
6:44
specify all the toolbar options that it
6:47
support inline toolbar as well
6:52
so I will paste everything
6:56
so so it actually takes these toolbar
6:59
options which Rich V visic Rich Text
7:03
Editor so if you try to refresh your
7:05
browser
7:11
and you will see this Rich Text Editor
7:14
now you can write your text it will show
7:16
you the live preview at the bottom side
7:17
so in this way you can guys you can
7:20
integrate this draft chairs visic Rich
7:22
Text edor inside react Shar so I have
7:24
given the full source code in the
7:26
description of this video so he provided
7:28
all these options in the toolbar so you
7:30
can see that in the array here one by
7:32
one we provided all these options
7:35
so so then we show the live preview in
7:38
this div
7:39
tag so thank you very much for watching
7:42
this video and do check out my website
7:44
as well free medat tools.com uh which
7:46
contains thousands of tools regarding
7:48
audio video and image and I will be
7:51
seeing you guys in the next video
#Other
#Educational Software
#Computer Education