Binding issue with Quill 2.0.0-dev.3

[matthieu-lefevre]

Hello,

first of all, thanks for this lib because it's really easy to use and configure.

Regarding the application I'm working on, I really need table feature so I installed quill-better-table and quill 2.0.0-dev.3 (since it is a requirement). I'm facing an issue with the data binding [(ngModel)] and [formControl] are not working: editor is empty. When I downgraded back to Quill 1.3.7, the binding is ok...

Did I miss something? Is the new Quill version supported?

Thanks and regards

[KillerCodeMonkey]

Since quilljs 2 is Not even in RC state i will Not officiall, Support IT. If ngmodel or formcontrol ist Not working try to Pass The Initial value AS "content" property.

But in General i only Support stable releases ;-)

Am 22.12.2020 in 15:29, Matthieu LEFEVRE notifications@github.com schrieb:

Hello,

first of all, thanks for this lib because it's really easy to use and configure.

Regarding the application I'm working on, I really need table feature so I installed quill-better-table and quill 2.0.0-dev.3 (since it is a requirement). I'm facing an issue with the data binding [(ngModel)] and [formControl] are not working: editor is empty. When I downgraded back to Quill 1.3.7, the binding is ok...

Did I miss something? Is the new Quill version supported?

Thanks and regards

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/1118, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YFSFUUB5GZ6CKYT2G3SWCUKZANCNFSM4VFWTDHQ .

[matthieu-lefevre]

Hi,

thanks for your quick answer! I created a wrapper component over quill-editor to simulate the binding stuff. I will remove when Quill2 support is ready.

nb: I'm not very fond of using unstable version of libraries but in that case I'm blocked :(

Thanks and regards

[harleenarora]

@matthieu-lefevre how to create wrapper component for data binding.

[matthieu-lefevre]

The wrapper component code behind: `import { AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from "@angular/core"; import { FormControl } from "@angular/forms"; import { QuillEditorComponent } from "ngx-quill"; import { Subscription } from "rxjs"; import { debounceTime, distinctUntilChanged } from "rxjs/operators";

@Component({ selector: 'text-rich-editor', templateUrl: './rich-editor.component.html', styleUrls: ['./rich-editor.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class TextRichEditorComponent implements AfterViewInit, OnDestroy {

private _contentSub: Subscription;

@Input()
configuration: any;

@Input()
text: FormControl;

@Output()
changed: EventEmitter<void> = new EventEmitter();

@ViewChild(QuillEditorComponent, { static: true }) editor: QuillEditorComponent;

initEditor(editor:any): void {
    const contents = editor.clipboard.convert({html: this.text.value, text: ''});
    editor.setContents(contents, 'silent');
    editor.setSelection(editor.getLength());
    editor.root.setAttribute('spellcheck', false);

    this.initTableHandler(editor);
}

ngAfterViewInit(): void {
    this._contentSub = this.editor.onContentChanged.pipe(
        debounceTime(1000),
        distinctUntilChanged()
    ).subscribe(val => {
        this.text.patchValue(val.html);
        this.changed.emit();
    });
}

ngOnDestroy(): void {
    if (this._contentSub) {
        this._contentSub.unsubscribe();
    }
}

private initTableHandler(editor: any): void {
    const toolbar = editor.getModule('toolbar');
    toolbar.addHandler('table', function() {
        const tableModule = editor.getModule('better-table');
        if(tableModule) {
            tableModule.insertTable(2, 2);
        }
    });
}

}`

The template: `<quill-editor [modules]="configuration.modules" (onEditorCreated)="initEditor($event)">

</span>

`

And how to use it: <text-rich-editor [text]="text" [configuration]="{modules: modules}" (changed)="onChanged($event)"> </text-rich-editor>