quill editor is not displaying the html string

user_12831013 0
Viewed 1823

I am new to angular and using quill editor in my angular app and I am using it to allow users to write HTML code and rendering the HTML code coming from backend and I am previewing that HTML in a separate div but unfortunately the quill editor isn't rendering any HTML code or any text in the editor. it is blank and getting Cannot convert undefined or null to object error in console. Any kind of help would be appreciated. thank you

public aboutOptions = { placeholder: "Enter About Text...", modules: false, theme: 'snow', format:'text' };

about:string = '<h1> hello world </h1>'


 onTxtEditorCreated(quill) {
    var toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandlerMain);
    this.txtQuill = quill;
       this.txtQuill.setContents(this.txtQuill.clipboard.convert(this.about));
  }
 <quill-editor id="about" name="about" [options]="aboutOptions" (ready)="onTxtEditorCreated($event)"  required [(ngModel)]="about">
 </quill-editor>

quill angular
1 Answers

Demo

if you didn't install

 npm install @dimpu/ngx-quill --save

in html use

<ngx-quill #editor  [modules]="modules"  [(ngModel)]="about" ></ngx-quill>

in component declare your models

about:string = '<h1> hello world </h1>'
  modules = {
    toolbar: [      
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['formula'], 
      ['image', 'code-block']
    ]
  };

If you bind directly string with html tag, quil converts it.

replaceAll(string, search, replace) {
    return string.split(search).join(replace);
  }

replace your html string wiht code like

this.about=this.replaceAll(this.about, "<","&lt;")
user_25762540
Related