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

ngx-quill-image-resize
error in ./node_modules/ngx-quill/fesm5/ngx-quill js
quill custom toolbar
quill-editor is not a known element
ngx-quill formcontrol
@dimpu/ngx-quill
quill sanitize html
angular material rich text editor

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:

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!

Custom Modules, using Quill.register() saying cannot read , Ngx-quill toolbar customization not working - quill Cannot import modules the setup the ngx-quill text editor in my project with a more complete toolbar than the​  I'm trying to add a new module in the editor to show image size and can resize it. I found this module for the Quill editor but I am not able to add it in ngx-quill when it returns the editor in onEditorCreated Component.js onEditorCr

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

    ]
  };

Integrate with module: quill-mention · Issue #141 , Custom Modules, using Quill.register() saying cannot read property 'register' of QuillJS documentation failed, I started working from your ngx-quill example again​. The import simply would not recognize the ImageResize, so the rest of <h3>​Editor without toolbar + required and ngModule</h3> <button  I'm trying to build a module that extends the Quill editor, and integrate it with my project. When I try to import specific Quill modules within my custom Quill module, webpack throws an error: Uncaught Error: Cannot find module "quill/c

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>

ngx-quill, I am trying to use the quill-mention module but not sure how to get it to integrate. GitHub is home to over 50 million developers working together to host and And used this code, which console errors with quill Cannot import modules/​mention. https://killercodemonkey.github.io/ngx-quill-example/. ngx-quill: 2.0.4 quill: 1.3.5. I'm not sure what you mean by dirty use. We'd prefer not to have to pull in quill directly, so that we don't have to maintain it separately from ngx-quill. I'll check out the typings repo to see if anyone has posted something there. The Quill library was quiet.

Toolbar Module, Angular components for the easy use of the QuillJS richt text editor. Yeah but There i can Not help You. Never did something like that with quilljs. It World be better to Ask this in the quilljs Repo. I only Know, that the quill default Formats have a style component (css Classes) to Set things like ql-format-xxx.

How to Customize Quill, // Note false, not 'normal', is the correct value // quill.format('size', false) removes the format, // allowing default styling to work var toolbarOptions =  My web application is based on Angular and I try to integrate Quill into it using ngx-quill library. I have created my custom embed blot containing just unmodifiable text block (retrieved from the database) and now I try to create a custom toolbar allowing users to insert instances of this blot into the text.

Package, Quill officially supports a standard toolbar theme Snow and a floating tooltip theme Bubble. an existing module already covers, you can simply not include it​—or explicitly var ColorClass = Quill.import('attributors/class/color'); var SizeStyle  Better would be to import ngx-quill like import { } from 'ngx-quill'; Webpack or ngc should find it, because it is using the original ts sources and bundles them. Might you show me some code? How you are using ngx-quill?