Quill table with Angular, not working on edit mode

Question

I have an Angular Application, I have a form and used quill-better-table (https://www.npmjs.com/package/quill-better-table)

I have added configurations mentioned here (How do I fix this error I get whenever I try to register quill-better-table with my quill editor component in Angular 8?) When I am in insert mode it works and generate rich text which you can past tables also inserts the data into database when now I want to populate the data in edit mode, the rich textbox does not display the content.

div id="quill">
    <p>Content *</p>
    <quill-editor [styles]="editorStyle" placeholder="Enter Text" formControlName="myfieldCtrl" required>
    </quill-editor>
</div>

Answer 1

I encountered this same issue where I'm trying to render an existing html data with Tables in it to quill editor. I ended up using clipboards' dangerouslyPasteHTML method.

Answer 2

follow my Answer on how to setup Quill in Angular properly here:

Integrating Quill text editor in an Angular application

Next I am not sure how you setup your angular but it might be issue with DomSanitizer

I put an example of how you can use DomSanitizer here the content is quill

in your component import:

import { DomSanitizer } from '@angular/platform-browser'

and make functions something like below

displayNewsfeed(newsfeed: INewsfeed) {
  this.onenewsfeed = newsfeed[0];
  this.textContent = this.HTMLSant(newsfeed[0].NewsfeedContent);
}

HTMLSant(html:string){
  return this.sanitizer.bypassSecurityTrustHtml(html);
}