Ngx-quill toolbar customization not working - quill Cannot import modules

Question

UPDATE: I bailed ship when I realized PrimeNg had a quill implementation and I was already using PrimeNg. Wasn't working at first but upgrading to angular 7 and ngrx 7 beta fixed issues. https://www.primefaces.org/primeng/#/editor

I'm attempting the setup the ngx-quill text editor in my project with a more complete toolbar than the default one. I'm just copying this code snippet from the documentation and haven't tweaked (yet!).

I do not get any browser errors if I don't include the modules attribute but I'm wondering if I have an import issue that's only showing when I try to add it?

instructions.html

 <quill-editor modules="editorOptions"></quill-editor>

instructions.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
  import * as Quill from 'quill';

@Component({
    selector: 'instructions',
    templateUrl: '../admin/instructions.html'
})

export class Instructions {
    public editorOptions = {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean'],                                         // remove formatting button

            ['link', 'image', 'video']                         // link and image, video
        ]
    };

Errors in the browser:

Karafuto

This link might be useful: github.com/KillerCodeMonkey/ngx-quill-example/issues/6 – Papiamento

Answer 1

Here i give the answer with "ngx-quill": "^5.1.0" version.

In your app.module.ts file

import { QuillModule } from 'ngx-quill';

@NgModule({
  imports: [QuillModule]
})

in your style.css file

@import "~quill/dist/quill.bubble.css";
@import "~quill/dist/quill.snow.css";

In your html file

<quill-editor [modules]="modules" [(ngModel)]="model"></quill-editor>
{{model}}

In your typescript file

model: string = '';

  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote'],

      [{'header': 1}, {'header': 2}],               // custom button values
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
      [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
      [{'direction': 'rtl'}],                         // text direction

      [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
      [{'header': [1, 2, 3, 4, 5, 6, false]}],

      [{'color': []}, {'background': []}],          // dropdown with defaults from theme
      [{'font': []}],
      [{'align': []}],

      ['clean'],                                       // remove formatting button

      ['link', 'image', 'video',]                   // link and image, video

    ]
  };

Battologize

Answer 2

Hi you might get this error because modules is an input and should be wrapped in brackets

 <quill-editor
    theme="bubble"
    [placeholder]="editorPlacehorder"
    [modules]="moduleConfig"
    [(ngModel)]="ngModelValue"
    (onContentChanged)="onContentChanged($event)">
  </quill-editor>

And be sure you have imported in your module QuillModule

import { QuillModule } from 'ngx-quill';

also add this module to imports arrary in your module file for ex. AppModule

imports: [
    QuillModule
]

and also make sure that you have imported in angular.json all file to make Quill work

  "styles": [
          "node_modules/quill/dist/quill.core.css",
          "node_modules/quill/dist/quill.bubble.css",
          "node_modules/quill/dist/quill.snow.css",
          "node_modules/quill-emoji/dist/quill-emoji.css",
          "node_modules/quill-mention/dist/quill.mention.min.css"
        ],
        "scripts": [
          "node_modules/quill/dist/quill.min.js",
          "node_modules/quill-mention/dist/quill.mention.min.js"
        ]

I hope this may works for you, if you have any question feel free to ask them!

Neurilemma

Answer 3

Even though you jumped ship, believe it was just your html:

<quill-editor modules="editorOptions"></quill-editor>

should be

<quill-editor [modules]="editorOptions"></quill-editor>

Wonacott