Up next in 10
Build a React.js Suneditor 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/8289fd432fe9aa294c86419a42b91863
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 sun
0:06
editor uh rich visic rich text editor
0:10
with live preview it's a
0:12
HTML you can write your text in the text
0:15
area and then we have these rich
0:17
controls out there you can change to
0:19
heading you can align it in the center
0:21
position italic underline strike through
0:24
you can even change the size of the text
0:27
then you can select any text change CH
0:30
the color of the text or you can add a
0:33
background here as well so all these
0:35
rich controls available to you and you
0:38
also images you can embed
0:42
images like this as well so I will show
0:46
you this complete example and then you
0:48
can see the live preview in the next
0:49
window so it will show you this live
0:51
preview as well
0:53
so then it will also show you this HTML
0:57
code which is there if you want to get
0:59
the HTML code of this so you can even
1:01
get so the package is Sun
1:04
editor-
1:07
react if you search on npmjs.com and
1:11
it's just install this I've already
1:13
installed it's almost got 12,000 weekly
1:16
downloads and if you don't know about
1:19
Sun editor it's a visic editor uh they
1:22
have their own official website you can
1:24
check it out and how to integrate this
1:27
it's very easy just make a simple
1:29
function functional
1:30
component
1:34
and now we need to import this package
1:36
so we use the import statement so we
1:39
simply import this package Sun editor
1:42
from this package Sun editor react and
1:46
we also need to import the CSS file of
1:48
this as Sun editor
1:50
react and it's present inside the dis
1:53
folder
1:54
CSS Sun editor. main.css so we import
1:59
the CSS F like this so 55 kiloby and the
2:03
base package is 7.35 kiloby and then
2:07
after that wherever we need to embed
2:09
this we come to the jsx and we align it
2:12
in the center position so I will just
2:14
give it a style tag width I will say 90%
2:19
and uh margin I will say Auto and I will
2:23
give some margin from the top position
2:25
as well which is 20 pixel and inside
2:28
this I give it a
2:31
heading which is Sun
2:33
editor react example and after that we
2:37
simply embed this editor by using this
2:40
component Sun editor and it actually
2:43
takes some options First Option it takes
2:45
is the options you need to
2:49
specify and uh it actually takes an
2:52
array of options so double curly
2:55
brackets so here you need to specify the
2:57
height of the visic editor and here here
3:00
you can specify 300 height and then the
3:03
button list it actually takes an array
3:06
of components one by one you will add it
3:09
we need the undo option redo option and
3:12
then we also need to format the text so
3:17
format
3:18
block if you also want to bold the text
3:23
italic and then
3:25
underline and then
3:27
strike so one by one inside single codes
3:30
we add the plugins right here undo redo
3:34
format so now if you just see in the
3:37
browser you can even provide a default
3:39
value as well so whenever you load the
3:42
editor this this text will be
3:44
automatically being written so if you
3:46
check your editor uh if you check the
3:49
browser just
3:51
refresh you will see these uh text area
3:54
this visib editor will show and it will
3:56
have this default value and here you can
3:59
now
4:01
write and we have these controls out
4:04
there in similar way you can add some
4:07
more controls so inside this similarly
4:10
we put put a comma and we add more
4:14
plugins so again in single codes font
4:17
size font
4:22
color so we basically add this controls
4:26
so all the source code I have given in
4:28
the description of this video so if you
4:30
need the source code you can go to the
4:32
descriptions so in this way we add all
4:35
the
4:37
plugins and then we also give it can
4:39
give it a placeholder text so here we
4:42
allow the user just telling them start
4:45
typing here and lastly if you also want
4:49
corrector counter to display at the
4:52
right hand side corner so how many
4:54
collectors that you written so if you
4:57
refresh just there is some kind of error
5:01
is there which is
5:03
placeholder sorry this is Cola not equal
5:09
to so now we have all the options
5:12
available to us so we also see the
5:14
corrector count appearing so how many
5:16
words that you write so in this easy way
5:18
you can integrate Sun editor visic Rich
5:22
Text Editor inside your react CH
5:24
application so you can do all sort of
5:27
things right here so thank you very much
5:28
for watching this video
5:30
and do check out my website as well
5:32
freem mediat tools.com uh which contains
5:36
thousands of tools regarding audio video
5:38
and MH and I will be seeing you guys in
5:40
the next video
#Programming
#Other