Up next in 10
Build a React.js Jodit WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using JavaScript
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/077add608e3e6141ae61c8d4b9550671
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
integrate a jit visic Rich text editor
0:08
with live preview so we have all these
0:11
rich controls available to us we can do
0:14
this so the name of the library is jit
0:17
which is an open source Rich text visic
0:20
Rich Text Editor we have all these
0:22
controls we also have the live preview
0:25
you can put a full size you can also
0:28
insert images from URL also
0:31
videos so we have all these controls the
0:34
name of the package is j o d t so you
0:37
should just write
0:39
this so it's a powerful viic Rich Text
0:42
Editor written in typescript so now to
0:45
integrate this inside react CH there is
0:48
a specific package which is available if
0:50
you go to npmjs.com uh just search for
0:53
this package Jord it-
0:57
react so this is a specific designed
1:00
package you install it by executing this
1:03
command I've already installed it so
1:06
it's having 30,000 weekly downloads so
1:09
now to integrate this we use the
1:11
functional component and just we import
1:14
this package by using the import
1:17
statement jit editor which will be
1:20
coming from jit
1:23
react so we import this it's just 832
1:28
kiloby
1:30
so after importing it now we go to the
1:34
jsx wherever you need to embed this and
1:37
we use the component jit editor and it
1:41
actually takes some options so first
1:43
option is take is the actual value for
1:46
this we just need to declare some State
1:49
variables so write here the
1:53
content set content and uh initial value
1:57
will be null using the UST State hook
2:00
and also you be just be using the US ref
2:02
hook for the reference initial value
2:05
will be
2:06
null first of all we'll be attaching the
2:10
reference
2:13
to to the
2:17
editor then we'll be attaching the diff
2:19
value content then we also need to
2:22
provide an config object which will hold
2:25
the configuration details about the
2:27
visic editor so we just declare variable
2:31
simple config and we use the use memo
2:41
hook so we load basically the
2:43
configuration settings from jit simply
2:46
by creating this
2:48
object provide a placeholder read only
2:52
false and then we are attaching this
2:55
config settings then it also takes an
2:57
object tab index
3:00
which I will set it to one and then on
3:03
blur
3:05
function so whenever you change your
3:08
settings this function will execute I
3:11
have given all the source code in the
3:13
description of this video so you can get
3:15
all the source codes we attached this
3:16
onchange event handler so when the
3:19
content is changed we are using the set
3:21
content function and same goes with the
3:23
on blur function as well so if you try
3:26
to refresh your application now the
3:29
visit editor will now
3:33
show uh I
3:40
think so now you can see the editor is
3:42
now
3:44
showing you also see this how many
3:46
characters or words that you written so
3:49
we see this powered by jit
3:51
so you can even embed tables as
3:57
well all these things you can do in this
4:00
editor so thank you very much for
4:01
watching this video and do check out my
4:04
website as well free mediat tools.com
4:07
uh which contains thousands of tools
4:10
regarding audio video and image and I
4:13
will be seeing you guys in the next
4:14
video
#Computer Education
#Educational Software