Невозможно сохранить html-контент и снова отобразить его для редактирования.
Я работаю над требованием, при котором я должен добавлять и редактировать контент с помощью quill-редактора, данные сохраняются в базу данных, и это нормально, но после повторного сохранения я должен получить его для редактирования.
Моя проблема:
При хранении контента теги p не добавляются к контенту. Я не знаю, как это исправить, я новичок в Quill Editor и Angular. Я искал решение, но я не нашел ни одного работающего решения, поэтому пришел сюда.
Quill-редактор 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);
}
}
где я делаю ошибку, это при хранении контента в базе данных или при получении данных?
Спасибо за вашу помощь.
1 ответ
Решение
Я наконец исправил проблему. С помощью innerHTML ниже исправление:
onSubmit() {
this.mailTemplateForm.controls.body.setValue(document.querySelector(".ql-editor").innerHTML);
--------
--------
}