Quill Editor showing something else

Question

I'm trying to use quill editor on my application, I have followed the required steps, the quill editor is showing where needed but it's showing some bunch of shapes and boxes. This is my code below; app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { AppRoutingModule } from './app.routing';
import { SharedModule } from './shared/shared.module';
import { QuillModule } from 'ngx-quill';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    HttpClientModule,
    QuillModule.forRoot()
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have also imported the QuillModule in the module I'm using it

The html code

<div class="form-group">
  <label for="">Post Body</label>
  <quill-editor formControlName="body"></quill-editor>
</div>

I have also imported the necessary quill styles in my styles.css

Below is the image of what the quill editor is displaying

If I keep scrolling, I continue to see different shapes.

Answer 1

Add following line in your index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css">

Answer 2

You need to add the following imports to your styles.scss:

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';