15

I am learning how to create blogging websites. I tried a simple example first. But the text editor is not showing up on my screen. I installed Quill with npm install --save quill@1.3.6 ngx-quill command. My app.component.html is very simple.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>

<div class="container">
  <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>
    <div class="col-md-4 bg-light p-4">
      <h3>Output</h3>
      <p class="my-5"></p>
    </div>
  </div>
</div>

Actually it should look like. enter image description here

I have also imported FormGroup and FormControl from @angular/forms in my app.component.ts which contains the following code.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  editorForm: FormGroup;
  ngOnInit() {
    this.editorForm = new FormGroup({
      'editor': new FormControl(null)
    })
  }
}

But I am getting this error. enter image description here

The entire project is on github. Please tell me what else I am missing in this project.

zgue
  • 3,793
  • 9
  • 34
  • 39
Tanzeel
  • 4,174
  • 13
  • 57
  • 110
  • Hi, i'm trying to implement ngx-quill but I'm getting an error for forRoot() i,e. Property 'forRoot' does not exist on type 'typeof QuillModule' . My angular version is 4.11.10 and ngx-quill is 3.6.0. Any guidance to resolve this ? Thanks – Pragati Kerur Apr 23 '20 at 17:42
  • @PragatiKerur, Did you add `QuillModule.forRoot()` in your `imports:[]` array of module class? – Tanzeel Apr 24 '20 at 05:37

3 Answers3

33

Follow these steps it should work:

1- Installation:

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill
  • include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with @import statements, or add them external stylings in your build process.

Update the angular.json file with the following code:

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

import it in your app.module.ts

   import { QuillModule } from 'ngx-quill'

and in the imports add it like bellow

 @NgModule({
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 })

in your component.ts file you can modify the editor style like bellow code:

   editorStyle = {
     height: '200px'
   };

and in your component.html file you could call it like bellow code:

 <div id="quill">
                <p>Content *</p>
                <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
                    formControlName="yourCtrlname" required>
                </quill-editor>
            </div>

You can also check: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

and here: https://www.npmjs.com/package/ng-quill

bygrace
  • 5,868
  • 1
  • 31
  • 58
MJ X
  • 8,506
  • 12
  • 74
  • 99
6

It means you haven't configured that library properly, particularly you should be importing QuillModule.forRoot() so that all delivered with this library providers are properly initialized.

@NgModule({
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
...

Btw, this is how documentation tells us to do it.

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • I have done this also. Here is my `app.module.ts`. `import { QuillModule} from 'ngx-quill';` ` imports: [ BrowserModule, QuillModule, ReactiveFormsModule ]....... – Tanzeel Aug 23 '19 at 19:58
  • 1
    Please do note `.forRoot()` call – yurzui Aug 23 '19 at 20:02
  • thanks for this. It worked. But please tell me why `.forRoot()`. I followed a youtube video. It wasn't there but still working for that guy. – Tanzeel Aug 23 '19 at 20:13
  • 2
    Because only with forRoot we get that config provider https://github.com/KillerCodeMonkey/ngx-quill/blob/2408e03eb8cf19b2fff33fb3fb3aeaa480d15600/src/quill.module.ts#L26 Maybe in that video that guy used old version where forRoot didn't exist – yurzui Aug 23 '19 at 20:19
  • Oh ok. Now I understand. Thanks. By the way that person is using Angular 7, and the video was published this year, Feb 2019. Here is link https://www.youtube.com/watch?v=Sh3_k_QPGzw – Tanzeel Aug 23 '19 at 20:23
  • 2
    In the video ngx-quill 4.6.3 was installed. You have 7 version. Now you can check changelog https://github.com/KillerCodeMonkey/ngx-quill/releases/tag/7.0.0 – yurzui Aug 23 '19 at 20:35
1

Thanks to @MJ X who's answer covers the most.

Today is 2021-09-13, Angular v11, ngx-quill 14.3.0, recap and supplement to his/hers:

1) Installation

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/material
 npm install @angular/platform-browser
 npm install quill
 npm install bootstrap  // optional for better look.

2) app.module.ts

import { QuillModule } from 'ngx-quill';
@NgModule({
  declarations: [...],
  imports: [..., QuillModule.forRoot() ]

3) root styles.css

 @import "~@angular/material/prebuilt-themes/indigo-pink.css";  /* required */
 @import '~quill/dist/quill.core.css';
 @import '~quill/dist/quill.bubble.css';
 @import '~quill/dist/quill.snow.css';
 @import "~bootstrap/dist/css/bootstrap.css";  /* optional for better look */
Jeb50
  • 6,272
  • 6
  • 49
  • 87