Up next in 10
Build a Suneditor.js 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/c9e3abf2822dc5db5b222b7d9c547208
Show More Show Less View Video Transcript
0:01
uh hello guys welcome to this video so
0:03
in this video I will show you yet
0:04
another uh Rich Text Editor viic HTML
0:08
Rich Text Editor uh which is called as
0:10
Sun editor Sun editor is again a rich
0:13
text editor where you can actually write
0:15
your text change all these apply some
0:19
awesome looking Rich text you can bold
0:22
your text italic you can insert images
0:25
so on your screen you will see we are
0:27
directly including this editor right in
0:29
the browser itself and for this we are
0:32
simply using the HTML CSS in JavaScript
0:35
you can even apply background color as
0:38
well then you can even apply links as
0:41
well so whatever link that you want to
0:46
embed so links you can directly
0:52
import can change to you can see you can
0:56
directly embed images as well click on
0:59
submit and then you can insert whichever
1:01
location if you want to Center this
1:03
image the image will be centered out you
1:06
will see that and there is now this
1:08
button available if you want to convert
1:10
this into HTML uh you will see that so
1:13
you also see the live preview as well so
1:16
whenever so it's a visic rich text
1:19
editor you can change the text size here
1:23
so you can even insert video as well if
1:25
you see if you want to see the live
1:28
preview you click the button of live
1:30
preview to see the
1:33
live so if you want to see the code as
1:36
well you will see now this will show you
1:38
the HTML
1:41
code so the actual Library name is s Sun
1:46
editor if you just directly write it in
1:48
the browser they have their own website
1:51
it's a pure JavaScript Vis G text editor
1:55
and it's open source so it's not a paid
1:58
Library
2:00
and I will show you a very basic example
2:02
uh so just first of all make a simple
2:05
HTML
2:06
file and after this V we'll be including
2:09
the CSS file for this package just after
2:13
the title so we are simply including the
2:15
CDN Sun editor min.
2:18
CSS so after this inside we also need to
2:23
include the Java Script code as well so
2:25
inside the script T just after the body
2:28
we paste the Java script CDN link as
2:31
well of this sun editor
2:34
main.js and after this if you also want
2:37
to add the language
2:39
control support you also need to include
2:42
English language so if you are working
2:44
with English language you provide this
2:46
english. GS so it has support for
2:48
multiple languages as well so we are
2:50
working with English language so we
2:52
included the CDN as well so now inside
2:56
the body we will just give it an H1 tag
3:00
we say sun and editor example and then
3:04
we will be having a simple div tag where
3:07
I will just give it an ID here of sample
3:10
editor and here you'll be simply be
3:12
saying welcome to Sun
3:17
editor we will have
3:22
this so this I will do it wrap
3:26
everything inside the text area so where
3:28
I will be loading this editor in the
3:31
text area so I will just give it an ID
3:33
to it of editor so we have just given an
3:37
ID to it and then inside this we will
3:39
just
3:41
write the welcome to Sun
3:46
editor so after this text
3:51
area so now I will simply write the
3:54
JavaScript code custom JavaScript code
3:56
right here inside the script tag and
3:59
here we
4:02
specify we load the S editor by simply
4:05
writing Sun editor dot it contains a
4:07
create method and right here you need to
4:09
paste whatever that ID that you have
4:12
specified right here so I will specify
4:15
editor the ID that you have given and
4:17
the second object it takes an object
4:19
right here the height of the editor so
4:22
let's suppose I want to give it height
4:24
is 300 and number of buttons that you
4:27
want to embit toolbar options that you
4:30
have so one by one you will embed this
4:33
so I let's suppose I want the undo
4:35
button and I also want the redo button
4:38
as well then I also want the format
4:40
block so in this way you can specify all
4:43
the toolbar options that you want to add
4:46
one by one
4:47
inside single codes so for we are
4:51
providing an array of toolbar
4:53
options so after you do this now
4:59
if you refresh here if I open
5:02
this you will see the text
5:06
editor the you will have these four
5:09
options available and if you want to see
5:11
the editor in full size then you need to
5:15
Simply write some custom Styles here so
5:17
inside the style tag we target
5:21
the editor by its ID and I just make the
5:26
WID to 100%
5:32
so now what happens it takes the entire
5:34
space here and now you will able to
5:37
change to H1 heading bold italic undo
5:40
redo options are also present and apart
5:43
from that uh if you also want to add all
5:47
the toolbar options that it
5:51
support then you will add all these
5:53
toolbar options so let me paste all the
5:57
buttons that it supports
6:00
I have given all the source code in the
6:01
description so we Bas basically pasted
6:04
all these controls available then for
6:07
the language I already told you you can
6:09
even provide a language as well
6:14
so by
6:15
default the language is English but you
6:18
can even change it the language right
6:21
here so en n stands for English then we
6:24
also can provide a placeholder as well
6:27
which is start typing here
6:33
and if you also want to show how many
6:35
correctors that you have written a live
6:38
editor preview then you can make this
6:40
property to true so it will now show you
6:42
how many correctors as you type just at
6:45
the right hand side
6:46
corner you'll see 44 correctors
6:50
so in a nutshell this is the way by
6:53
which you can integrate your son editor
6:55
Vis text editor now you have all these
6:58
controls available you can
7:00
edit your text this is a complete
7:05
editor so then we can simply add a
7:08
button uh if you do need to add a button
7:11
to show live preview after you have
7:17
written so we just have this button show
7:20
HTML content and we binded
7:23
this we can show the HTML preview so
7:27
right in JavaScript we can bind an
7:28
onclick list l so when we click this we
7:31
get the content of the editor and show
7:33
it in a inner HTML
7:38
so click the button and you will see the
7:41
live preview that's all that but it has
7:44
a
7:45
pre-built preview option available so
7:48
you don't need that so it will open a
7:50
new window and it will show you the live
7:52
preview so this is a complete example
7:55
and thank you very much for watching
7:56
this video and do check out my website
7:59
as well free mediat tools.com uh which
8:02
contains thousands of tools regarding
8:04
audio video and image and I will be
8:06
seeing you guys in the next video
#Web Design & Development
#Other
#Open Source