CODEWITHSUNDEEP
angularquill
Prem
Prem

Reputation: 124

quill editor is not displaying the html string

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>

Upvotes: 2

Views: 2906

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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;")

Upvotes: 1

Related Questions