Unable to use quill editor in anngular 14

[iamrathodmanoj]

Using the version of ngx-quill is "ngx-quill": "^16.0.0", and quill is 1.3.7 and rxjs version is ^6.5.5 and angular version is ^14.2.10.

Html code :

Component code : import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { QuillEditorComponent } from 'ngx-quill';

@Component({ selector: 'med-text-editor', templateUrl: './med-text-editor.component.html', styleUrls: ['./med-text-editor.component.scss'] }) export class MedTextEditorComponent implements OnInit,AfterViewInit{ @ViewChild('editor', { static: false }) editor: QuillEditorComponent; editorContent = ''; // Property to bind the editor content editorConfig = { 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
]

}; constructor() { }

ngOnInit() { console.log('text editor is loaded'); }

ngAfterViewInit() { if (this.editor) { console.log('Editor instance:', this.editor); } else { console.error('Editor instance not found'); } } } Module : import { NgModule } from '@angular/core'; import { MedTextEditorComponent } from './med-text-editor.component'; import { QuillModule } from 'ngx-quill'; import { FormsModule } from '@angular/forms';

@NgModule({ imports: [ FormsModule, QuillModule.forRoot() ], declarations: [MedTextEditorComponent], exports: [MedTextEditorComponent] }) export class MedTextEditorModule { }

But the quill is not loading it is encountering an issue :
Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'apply') TypeError: Cannot read properties of undefined (reading 'apply') at DOMTokenList. (shim-array.js:211:31) at Toolbar.attach (quill.js:9421:28) at quill.js:9393:13 at NodeList.forEach () at new Toolbar (quill.js:9392:16) at SnowTheme.addModule (quill.js:6130:28) at SnowTheme.addModule (quill.js:6774:121) at quill.js:6122:17 at Array.forEach () at SnowTheme.init (quill.js:6120:41) at new Quill (quill.js:1163:16) at ngx-quill.mjs:367:32 at _ZoneDelegate.invoke (zone.js:409:30) at Zone.run (zone.js:169:47) at NgZone.runOutsideAngular (core.mjs:26173:28) at ngx-quill.mjs:366:19 at resolvePromise (zone.js:1262:35) at zone.js:1169:21 at zone.js:1185:37

And want to what version is more compatible with the angular ^14.2.10 version and rxjs :^6.5.5 , Please can you help me with this issue.

[KillerCodeMonkey]

Just check git release history.

Angular support was added in v17.0.0 and should work til 19.0.1.

But in general no support or maintenance for such old versions

[KillerCodeMonkey]

https://github.com/KillerCodeMonkey/ngx-quill/releases/tag/v17.0.0

https://github.com/KillerCodeMonkey/ngx-quill/releases/tag/v19.0.1