i have Imported installed quill but the issue with user interface - quil

Question

Well I followed the example
https://www.youtube.com/watch?v=Sh3_k_QPGzw
I don't get the Quill tool bar as shown in the any of the examples
<div style="text-align:center">
<div class="container-fluid">
<div class="row pt-5">
<div class="col-md-8">
<form [formGroup]="editorForm" (ngsubmit)="onSubmit()">
<div class="form-group">
<label for="editor"><h3>editor</h3></label>
<quill-editor></quill-editor>
</div>
</form>
</div>

Answer 1

I just tried your example:
<div class="form-group">
<label for="editor"><h3>editor</h3></label>
<quill-editor></quill-editor>
</div>
Result:
It works fine showing all the standard toolbar-items, so make sure you also imported quill.snow.css and quill.bubble.css
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
in your html and
#import "./app/quill/quill-emoji.css";
#import "./app/quill/quill-mention.css";
in your styles.css.
If you are using your own custom toolbar container you also need to create the buttons inside it.
From the official docs:
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar', // Selector for toolbar container
handlers: {
'bold': customBoldHandler
}
}
}
});
Because the container option is so common, a top level shorthand is also allowed.
var quill = new Quill('#editor', {
modules: {
// Equivalent to { toolbar: { container: '#toolbar' }}
toolbar: '#toolbar'
}
});
The official documentation and some good examples:
Doc on toolbar
Example
Example on Stackblitz
Example on CodePen with custom toolbar-container