Ngx-quill: Global config with lazy loaded modules not working

[ggjersund]

I'm struggling with the global configuration for my lazy loaded modules.

I have the given structure:
The app root module, a core module (imported once by the root module), shared module (imported by each module which needs certain elements e.g. components, directives ++) and the lazy loaded children modules of the root module.

I'm trying to use Quill in one of the lazy loaded modules, but I dont get the global config whenever I import QuillModule.forRoot() in each of the child modules, while having the following in the core module:

@NgModule({
  imports: [
    QuillModule.forRoot({
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          [{ 'font': [] }],
          ['link', 'image', 'video'],
          ['clean']
        ]
      }
    }),
  ],
  ...

Also, I get Can't bind to 'content' since it isn't a known property of 'quill-view'. whenever I try the code below. Note that quill-editor works, but not quill-view.

<quill-editor
  *ngIf="edit"
  [(ngModel)]="content">
</quill-editor>
<quill-view [content]="content" theme="snow"></quill-view>

[ggjersund]

I simply had to use QuillModule.forRoot() in the core module, and just QuillModule in the lazy loaded modules. quill-view worked once I updated to Angular 8 and updated all dependencies. Consider this issue solved.

[KillerCodeMonkey]

puiiiih, glad you solved it.

Yes i fixed this in one of the latest ngx-quill versions:
https://github.com/KillerCodeMonkey/ngx-quill/releases/tag/7.0.0

[ggjersund]

@KillerCodeMonkey If I wish to use image resize, is there a quick config for this library or do I need follow the steps of the repository?

[KillerCodeMonkey]

there is no quick config because it is a thirdparty module for quilljs.

But you can pass the modules config to the forRoot() config where the image resize module is configured for all your editor instances.

[ggjersund]

@KillerCodeMonkey I have another question regarding sanitizing. Am I supposed to get the warning WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss when using [sanitize]="true"?

[KillerCodeMonkey]

the warning has in general nothing to do with the quill editor, because it only occurs with you are using, e.g. [innerHTML] somewhere in your app.

All content produced and inserted into the quill editor is not sanitized per default. Because of that i added the sanitize property to explicit sanitize the html content before it is inserted.

checkout the live demo:
https://killercodemonkey.github.io/ngx-quill-example/#sanitize

There are to editors 1 with and without the property. you will notice the difference :)

[ggjersund]

@KillerCodeMonkey Thanks, however this warning only shows up when I use the [sanitize]="true" in the editor. When I remove it the warning disappears.

Gives warning:

<quill-editor [(ngModel)]="content" [sanitize]="true" [styles]="{height: '250px', width: '100%'}" [bounds]="self">

Gives no warning:

<quill-editor [(ngModel)]="content" [styles]="{height: '250px', width: '100%'}" [bounds]="self">

[KillerCodeMonkey]

now i get it. this is correct.. because angular stripped some tags. that is what sanitizing should do ;)

[ggjersund]

@KillerCodeMonkey Any config to supress it? or will it be removed in prod?

[KillerCodeMonkey]

there should not be any warning from angular in production builds.

there are none in my demo and there is an sanitize example :)

[ggjersund]

@KillerCodeMonkey Great, thank you so much for taking your time to help out. Also great work with this repository!
If I have some spare time, I'll check out creating a mobile friendly image-resize plugin for it :)

[KillerCodeMonkey]

nice and have fun :)

[PrashanthkumarR]

Can't bind to 'preserveWhitespace' since it isn't a known property of 'quill-editor'.
I'm getting this error I don't why I saw GitHub instruction as per that I did the also I'm getting this error...

[KillerCodeMonkey]

https://github.com/KillerCodeMonkey/ngx-quill-example/blob/cfee573698f5c7cb8d006b111b3db64f3b9261cf/src/app/preserve-whitespace/preserve-whitespace.component.html

https://killercodemonkey.github.io/ngx-quill-example/
The "Preserve Whitespace - use pre tag instead of div" editor