Up next in 10
Angular Quill Wysiwyg Rich Text Editor With Controls & Emoji Using ngx-quill Library in TypeScript
Jan 21, 2025
Get the full source code of application here: https://codingshiksha.com/angular/angular-quill-wysiwyg-rich-text-editor-with-controls-emoji-using-ngx-quill-library-in-typescript/ 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 quill viic editor inside
0:07
angular uh you can see on your screen
0:10
this is actually the live demo uh you
0:12
will all these visic controls Rich Text
0:15
Editor and you can use
0:19
actually make this use all these
0:22
controls bold italic underline strike
0:24
through and you can even have a image
0:27
picker as soon as you click it you will
0:30
be able to select images as well so
0:32
images will be displayed with live
0:33
preview so there is a specific module
0:37
here which allows you to integrate this
0:39
visic editor uh let me show you the
0:41
editor here if you go to npmjs.com and
0:44
just search for this ngx
0:46
quill so this is actually the name of
0:49
the module and I've already installed it
0:52
so I've written a complete step best
0:54
blog post on my website so if you need
0:56
this full source code you can go to the
0:58
description link so 17 9,000 weekly
1:01
downloads are there so now to get
1:02
started here first of all I will delete
1:05
everything and start from
1:08
scratch you need to go to your
1:13
uh this file app. module. typescript
1:16
file to actually register this module so
1:18
for registering it we need to add two
1:20
lines here first of all we need the
1:23
built-in forms module as well from
1:26
angular so which is present inside your
1:29
app atate angular SL forms we need this
1:33
forms module and also we need the quill
1:36
module here which we
1:39
installed so which will be coming from
1:41
this ngx Quil and then we need to Simply
1:44
add this inside this Imports areay so
1:48
first of all your forms module and then
1:50
this qu module so in this way you can
1:53
register it by going to your app.
1:55
module. TS file and then importing it
1:57
and adding it inside the Imports array
1:59
now we come to your app. component. HTML
2:03
file so now to register
2:06
this or render this we come to your
2:09
template file and
2:13
uh we will simply
2:17
have a input feied where we will write
2:22
everything it can be even be a text area
2:24
as well and we'll need to pass an NG
2:27
model here we can give it a name here
2:31
subject so you can see we have given
2:34
this input field so now we have this
2:36
input field right here and then we will
2:38
be integrating this Quil editor so the
2:41
directive is
2:45
simple and then it actually takes the
2:48
actual model here which you need to
2:51
configure
2:55
it so NG model will be html text
3:07
and then it actually takes some
3:09
parameters you can even give it a
3:18
placeholder which will be enter
3:26
text and then here you need to specify
3:29
the module here which we are using so
3:31
modules and
3:33
then this is a
3:36
configuration object that you will
3:38
declare in the typescript code I already
3:40
declared this so as soon as I put this
3:42
ql
3:48
config and we need to
3:50
attach both these call back functions
3:53
whenever you select something
4:08
so I have given all the source code in
4:11
the description so if I paste it now
4:31
so you can go to my blog post here we
4:33
have given this typescript code here if
4:36
you see you need to go to your
4:37
typescript code and paste it this
4:46
one and this is actually the code there
4:50
for app. component. HTML file you paste
4:52
this code as well and
4:57
uh then here if you
5:01
see we imported this if you check you
5:05
need to go to this app. module. TS file
5:09
and register
5:22
this and here need to I forgot to some I
5:26
forgot this line which is Quil module
5:28
and we need to invoke this for root
5:30
function this was error so we need to
5:33
execute this for root function as you
5:35
are including inside your app. module.
5:37
TS file so now you will see all these
5:39
parameters comes and you can actually
5:42
edit this typescript code so all these
5:44
toolbars options that you see bold
5:46
italic underline so here if you want
5:49
don't want this bold control you can see
5:51
it will go away if you don't want the
5:53
italic it will also go away so you can
5:56
customize these options whichever
5:58
options you need
6:00
here you can see this is the image and
6:01
the video if I REM remove this you will
6:04
see the image support will go away so in
6:06
this toolbar options you can one by one
6:09
you can add all these
6:11
options you can see that so these are
6:14
all these options that you see bold
6:17
italic underline the ability to select
6:26
images so this is with live preview so
6:29
this is actually the visic editor you
6:31
can directly integrate inside your
6:32
angular application I've written a
6:34
complete step-by-step blog post where
6:36
you can get the full source code as well
6:38
so thank you very much for watching this
6:40
video guys and also check out my website
6:43
as well uh free media tools.com
6:46
uh which contains thousands of tools
6:49
regarding audio video n MH and I will be
6:52
seeing you guys in the next video