Up next in 10
Build a Summernote 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/ef32c5d2064d93b19cdf90002d6fae21
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 visib GD text editor inside
0:07
browser you can directly include it in
0:09
the browser so we have this nice little
0:11
text area where you can write the text
0:15
right here so it will be able for useful
0:17
for if you are developing some kind of a
0:20
Blog so here you can write your whatever
0:24
text that you want to write and then you
0:26
have all these rich controls out there
0:27
you can change it to heading you can
0:29
change the font as well
0:33
and if you want to select let's suppose
0:36
this text and change the background
0:37
color you can
0:40
select this color and now you'll see it
0:43
will add this background here if you
0:45
also want to embed images you can choose
0:47
the image picker and then directly embed
0:50
images as well so if you want to see the
0:53
code here of HTML code of whatever text
0:56
that you have written so it will convert
0:57
this to an HTML and you will be able to
1:01
see the actual codee of this file
1:04
so in this way you can see the code HTML
1:08
code as well and you can embed direct
1:12
links you can even embed a table as well
1:15
if you want to do the tabular
1:21
data 3x3 table be inserted and then you
1:25
can put your t uh whatever data inside
1:28
the table so you can you can do all sort
1:30
of things uh you can change the
1:32
alignment you can have unordered list
1:34
ordered list change the alignment as
1:37
well
1:39
so the package is summer note the name
1:44
of the library is summer note if you
1:46
directly write it summer note is
1:48
actually a super simple viic Rich Text
1:52
Editor and it's a open source package
1:55
the most important thing about it so
1:56
it's totally free and uh
2:01
I will show you a very basic example how
2:03
to run it in the browser for this J cury
2:06
will be required so you do need to
2:08
include jQuery so just create a simple
2:11
index.html file and just write the basic
2:16
HTML template and first of all as I
2:19
already told you we do need uh jQuery
2:22
for this so and also bootstrap so what I
2:27
will do I will simply include the CDN
2:30
for bootstrap the CSS part so we
2:33
included the bootstrap min. CSS file
2:36
then we also include the Java Script
2:38
part as well so just after the body we
2:41
paste the jQuery CDM if you see we are
2:43
including
2:45
it and also we will be including the
2:48
JavaScript CDN for the bootstrap part
2:51
you will see bootstrap
2:53
min.js so if you have any sort of
2:56
confusing uh regarding the code I have
2:59
given the link in in the description of
3:00
this video so if you need the full
3:02
source code you can go to the
3:03
description link and then we will
3:06
include the CDN for the
3:09
actual C CSS for the summernote library
3:12
summernote min. CSS and same for the
3:16
JavaScript as well
3:18
so the ordering is very much important
3:21
first of all you uh paste the jQuery
3:23
then you paste your bootstrap and then
3:25
the library summer not main.js so after
3:28
including all these CSS and JavaScript
3:31
CDN links now inside the body you will
3:34
simply have a div tag and he'll be
3:37
giving an ID to
3:39
it let's suppose I give it as
3:42
editor and inside this div we provide
3:45
initial value we will write the simple
3:50
HTML content a simple paragraph and now
3:55
inside the the custom JavaScript code we
4:01
use the document. ready function of
4:04
jQuery and whenever your document is
4:09
ready we basically Target the element by
4:13
using its ID so whatever ID that you
4:15
have given if you see we have given this
4:17
editor ID so we target this directly by
4:20
passing this hash symbol whatever is
4:22
your ID and then we simply use the
4:25
function summer note this is the actual
4:28
Library function
4:30
which is used to load your Vivic re text
4:32
editor inside inside the div tag so if
4:35
you open your application you will see
4:38
this editor will will be loaded and now
4:40
you will be able to perform all these
4:42
modifications you will be able to write
4:45
text and insert images tables as well so
4:49
in this way you can integrate directly
4:50
this editor in the browser so thank you
4:55
very much for watching this video and do
4:57
check out my website as well free mediat
5:00
tools.com uh which contains thousands of
5:03
tools regarding audio video and image
5:06
and I will be seeing you guys in the
5:08
next video
#Web Design & Development
#Open Source