无法存储 html 内容并再次显示以供编辑

Question

我正在处理一个要求，我必须使用 quill-editor 添加和编辑内容，数据正在存储到数据库中，这很好，但再次保存后我必须检索它以进行编辑。

我的问题：

在存储内容时，p 标签不会添加到内容中。我不知道如何修复它，我也是 quill editor & angular 的新手。我已经搜索了解决方案，但我找不到任何有效的解决方案所以来到这里。

quill-editor HTML:

    <div>
    <ul class="list-style-none mt-0">
       <li *ngFor="let field of fieldList" class="py-4 text-uppercase">
        <a color='accent' class='cursor-pointer' (click)="appendTagTo(field.field_name)"> {{ field.label_name }}
        </a>
       </li>
    </ul>
    <div>
    <quill-editor [style.display]="'block'" (onEditorCreated)="onEditorCreated($event)" [style.height]="'400px'" formControlName="body" #description>
    </quill-editor>

component.ts

    import { QuillEditorComponent } from 'ngx-quill'; 
    export class EditMailTemplateComponent implements OnInit { @ViewChild('description') description: QuillEditorComponent; 
     public editor; 
     editForm() { 
      this.mailTemplateForm = this.fb.group({ id: 0, name: [''], body: [''], }); 
     } 
     getFormData() 
     { 
      this.editForm(); 
      this.mailTemplateForm.patchValue(this.data.form_data); 
     } 
     onEditorCreated(event) {
       this.editor = event; 
     } 
     onSubmit() 
     { 
      this.mailTemplateForm.controls.body.setValue(this.editor.getText()); 
     } 
     appendTagTo(textTOInsert: string) 
     { 
      textTOInsert = '{{'+textTOInsert+'}}'; 
      const selection = this.editor.getSelection(true); 
      this.editor.insertText(selection.index, textTOInsert); 
     } 
    }

我哪里做错了，是在将内容存储到数据库时还是在检索数据时？
感谢您的帮助。

Answer 1

我终于解决了这个问题。通过使用 innerHTML，修复如下：

onSubmit() {
  this.mailTemplateForm.controls.body.setValue(document.querySelector(".ql-editor").innerHTML); 
  --------
  --------
}

无法存储 html 内容并再次显示以供编辑

Unable to store the html content and display again for edit purpose

html

editor

angular

ngx-quill