0

I am able to create ngx-quill editor in angular. I am not able to understand how to populate the data in the editor though. quill editor returns html and well as delta object. I dont see any option on how to populate it into the editor when the next time user comes to the page.

QuillJs has some APIs like setContents but it needs to be called using quill instance and in angular I am not able to understand how to get the quill instance and then call setContents methods.

Thanks in advance for the help.

Aayush Bajaj
  • 1
  • 1
  • 2

2 Answers2

0

You can use ngModel ->

ngModel - set initial value or allow two-way databinding for template driven forms

Check ngx-quill

Sa Hagin
  • 502
  • 1
  • 7
  • 18
  • Yes I tried that but that only populates plain text not along with the html format. Correct me if my understanding is wrong – Aayush Bajaj Mar 04 '22 at 10:37
  • Have you tried to populate it with HTML? I'm using the latest version and, populating it with HTML is formating the content automatically. Also, check you are not setting the 'format' input to 'text' (by default it's html). – Sa Hagin Mar 04 '22 at 10:40
  • I tried but I am unable to. Do you have it on any repository so that I can have a look where I am doing wrong.? – Aayush Bajaj Mar 04 '22 at 10:43
  • Can you post the code here? Template and component? – Sa Hagin Mar 04 '22 at 10:44
  • No, not a public repo. But have a look at this stackblitz: https://stackblitz.com/edit/ngx-quill-angular?file=src%2Fapp%2Fapp.component.ts – Sa Hagin Mar 04 '22 at 10:47
  • Hey Thanks Sa Hagin the problem has been solved. I was un neccessary playing with the delta object. Your suggestion on html helped me. – Aayush Bajaj Mar 04 '22 at 11:01
0

Just in case if anyone wants to populate the data with html formatting without even using reactive forms then this can be a suggestion. IN HTML :

<quill-editor
  [styles]="{ height: '400px' }"
  id="textEditor"
  (onContentChanged)="contentChanged($event)"
  (onEditorCreated)="created($event)"
>

IN .TS :

 created(event: any) {
    console.log(event);
    var html = localStorage.getItem('html');
    if (html != null) {
      event.root.innerHTML = html;
    }
  }

  changedEditor(event: EditorChangeContent | EditorChangeSelection) {}

  contentChanged(obj: any) {
    localStorage.setItem('html', obj.html);
  }

What basically you are doing here is you are storing the HTML file while editing the content in localStorage, In practical you would want to store it in database and then in the created method which is called every time the editor is loaded while rendering the screen you are assigning the HTML in editor.root.innerhtml

Aayush Bajaj
  • 1
  • 1
  • 2