live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React.js TinyMCE WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using JSX
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/0ae82f4000c2673efe9c53adf0df62c4
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
integrate the tiny MCE uh real visic
0:08
HTML Rich text editor with live preview
0:11
so tiny MC is a company very popular
0:13
library for
0:15
integrating visic editor so you can see
0:18
it is showing that you must use the API
0:20
key so for that you need to create a
0:23
simple tiny MC just go to the website
0:25
and create account and then you will get
0:27
this option to get your API key so you
0:29
can you get this for totally free you
0:32
just need to create an account and then
0:34
inside your react code you will replace
0:37
your API key right here so once you
0:40
replace the API key now this restriction
0:43
will go away and you will see now you'll
0:46
be able to use the visic editor so now
0:50
the editor right here you can write your
0:53
text format all these which controls are
0:56
available for you so side by side so you
1:00
can select the text bold italic and if
1:04
you want to change it to
1:06
any you select it so you will see it add
1:10
a
1:10
background then we have the alignment
1:13
plugins you can align it in the center
1:15
left right position bullet
1:18
points have all these plugins
1:21
available and If you also want to put a
1:24
table you can even insert a table like
1:26
this so it's Advanced Rich visic Text
1:29
Editor
1:30
and I will show you step by step how to
1:32
integrate this inside your react CHS
1:35
application you can even see a live
1:36
preview as well which comes with this
1:40
and you can even insert images as well
1:42
so if you just go to npmjs.com and just
1:46
search for this package uh which
1:49
is at the rate tiny
1:53
mc/ tiny
1:56
mc- react so this is specifically design
1:59
design for react CHS a component
2:02
official coming from the official
2:05
package so just install this I've
2:07
already installed it it's having 137,000
2:10
weekly downloads so now to use this just
2:14
create a simple functional
2:17
component and then we need to import
2:20
this editor so we import this
2:24
editor coming from this package tiny MCE
2:28
react it's almost 16 kiloby and in this
2:32
way you can import this
2:33
package and uh now wherever you need to
2:37
insert this we come to the
2:39
jsx
2:41
and we align it in the center position
2:44
so what I will do I will add the
2:49
CSS so after this heading we embed this
2:52
component editor and it actually takes
2:55
some parameters first of all we need to
2:57
pass the API key so just go to your
2:59
dashboard and simply copy paste the API
3:03
key and paste it here the second option
3:06
it takes is your on init call back
3:10
function so whenever this extension or
3:12
visic editor is loaded this function
3:15
will execute I will just write it inside
3:18
inline and we will load this so you will
3:21
create a variable right here uh
3:24
reference
3:25
variable right at the top so editor
3:29
reference
3:31
I will use the user hook of react CH
3:34
initial value will be null so we'll use
3:37
this reference variable and to load this
3:39
editor editor reference. current is
3:43
equal to
3:44
editor then initial value you can even
3:46
provide it so we can have provide a
3:49
simple paragraph that's welcome to Tiny
3:52
MCE overall it's say visic HTML Rich
3:56
Text Editor so we just provide this next
3:59
property
4:01
we have is the init object init
4:04
configuration object that you want to
4:05
provide inside this object you set
4:08
overall property about the editor such
4:10
as the height I will say 300 if you also
4:13
want the menu bar you will say true then
4:16
if you want you can provide the plugins
4:19
one by one inside single codes so it has
4:22
multiple plugins out there so you can
4:24
add all these
4:26
plugins so I I have given the full
4:29
source code in the description of this
4:31
video so you can check out the source
4:34
code so inside the plugins I will paste
4:36
it so in this way you can add all these
4:39
plugins so after adding this we also
4:42
have the toolbar option in the similar
4:45
way you will add all the options in the
4:47
toolbar as
4:49
well like
4:51
this so if you just try to refresh this
4:56
application you will now see this uh
4:59
menu bar
5:01
the we have all these options appearing
5:03
in the editor this Rich Text Editor so
5:06
here you can write your text you can
5:08
apply these
5:12
options so in this way guys you can
5:16
easily integrate this Rich Text Editor
5:18
right in the nextjs
5:20
application and I have given all the
5:22
source code in the description so if you
5:24
need the full source code you can go
5:26
get go to the description of this video
5:29
so thank you very much guys for watching
5:31
this video and do check out my website
5:33
as well uh free mediat tools.com uh
5:37
which contains uh thousands of tools
5:39
regarding audio video and MH and I will
5:43
be seeing you guys in the next video
#Internet Software
#Web Design & Development
#Other