How to populate data in ngx-quill editor with formatting maintained?-CodePudding

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.

CodePudding user response：

You can use ngModel ->

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

Check ngx-quill

CodePudding user response：

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