Search code examples
angularquill

Quill table with Angular, not working on edit mode


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>

Solution

  • 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);
    }