Up next in 10
Build a Angular WYSIWYG Rich Text Editor With HTML Controls Using @kolkov/angular-editor in TS
Feb 5, 2025
Get the full source code of application here: https://codingshiksha.com/angular/build-a-angular-wysiwyg-rich-text-editor-with-html-controls-using-kolkov-angular-editor-in-ts/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
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 visic rich text HTML
0:07
editor where you can actually write your
0:10
text with all these rich controls out
0:12
there you can make your text bold italic
0:15
underline strike through and we can even
0:18
add images using this image picker so
0:21
you can select any image PNG or JPG file
0:24
so as you select the image you will see
0:26
the image will be selected and we also
0:29
have these controls out there if you see
0:32
so it's a visic editor you can directly
0:34
integrate this inside your angular
0:36
application so there is a package here
0:38
which allows you to do this so the name
0:41
of the package is if you go to npmjs.com
0:44
uh just search for this package this is
0:48
the command here let me zoom in so this
0:51
is actually the command you need to
0:52
Simply execute and install this package
0:55
it's almost having 34,000 weekly
0:57
downloads so it's a angular native viic
1:01
Rich Text Editor for angular all the
1:03
versions it is compatible so I written a
1:06
simple step-by-step blog post on my
1:08
website alongside I have given all the
1:10
example source code so now to get
1:12
started I will delete everything and
1:13
start from scratch so so first of all
1:17
what we need to do we need to go to this
1:19
file here app. module. typescript file
1:22
and we need to register this module so
1:24
for registering it we need to add this
1:26
import statement right here
1:30
so we just need to add this import
1:32
statement this is actually your third
1:34
party module which is coming from this
1:36
package you need to add this import
1:38
statement and then go to the import s
1:40
right here just add this module which is
1:43
angular editor module that's all the
1:46
configuration part you just need to
1:48
close this file now and now you come to
1:50
the app. component. typescript file so
1:53
now to use this actual you will simply
1:56
declare a variable of this editor visic
1:58
editor so this will be of type
2:03
uh the classic
2:07
editor so this classic editor will be
2:10
coming
2:11
uh from you can just import this at the
2:15
very top import everything as
2:19
classic editor and it will be coming
2:21
from this
2:23
package that we installed so you just
2:26
need to import the package so this way
2:30
you import the package and declare a
2:32
variable of this specific editor and
2:34
also the second variable which will be
2:36
text which will be empty by default so
2:40
these two variables are required now we
2:43
come to the app. component. HTML the
2:45
template file so right here we simply
2:49
paste this
2:52
uh your inner HTML so as soon as you do
2:56
this you will see on the right hand side
2:58
we see a brand brand new editor so with
3:01
all these controls viic controls so in
3:04
this way you can integrate this Rich
3:06
Text Editor we have all these controls
3:09
out there you can change the phone size
3:11
just select the text you can change the
3:13
phone size or also you can change the
3:17
background color as well using this
3:19
Color
3:19
Picker you can see that so you can even
3:22
add videos images you can even add SC
3:25
Snippets you can add so you can see it's
3:28
a fully fleshed uh visic Rich Text
3:31
Editor and I showed you step by step how
3:34
to integrate this you can even export
3:36
this into a HTML code as well so just
3:39
need to click this toggle button so it
3:42
will show you the live preview of the
3:43
HTML so if you want to paste this HTML
3:46
somewhere else you can make your blog
3:48
post using this nice little editor so
3:50
this is the rich text editor guys for
3:52
angular application specific module that
3:54
I showed you step by step so if you need
3:56
the full source code you can go to my
3:58
blog post where I have written a step
4:00
by-step blog post alongside with the
4:02
full source code and thank you very much
4:04
guys for watching this video and also
4:06
check out my website as well free mediat
4:09
tools.com uh which contains thousands of
4:12
tools regarding audio video and image
4:14
and I will be seeing you guys in the
4:15
next video