Предварительно назначить значение в редакторе Quill JS

Question

Я добавил Quill JS на home.html. Я присваиваю ему значение из переменной. Он показывает pre assigned value, но не показывает его свойство html.

Вот мой код home.html ::

<ion-content>
  <form [formGroup]="editorForm" (ngSubmit)="OnSubmit()">
    <div class="form-group">
      <label for="editor">
        <h3>Editor</h3>
      </label>
  <quill-editor [(ngModel)]="dhtml" formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">Submit</ion-button>
</form>
</ion-content>

и home.ts code ::

export class DesigntemplatePage implements OnInit {

  loggedInusr;
  editorForm: FormGroup;
  dhtml = '<p><font color="red">This is some text!</font></p>';

  form: FormGroup = this.fb.group({
    html: new FormControl(null)
  })
  constructor(private fb: FormBuilder,private storage: Storage,private firestore: AngularFirestore) { }

  ngOnInit() {
    this.storage.get('loggedInUser').then((val) => {
      console.log('Your user ID is', val);
      this.loggedInusr = val;
    });
    this.editorForm = new FormGroup({
      'editor': new FormControl(null),
    })
  }

  OnSubmit(){
    console.log(this.editorForm.get('editor').value);
  }

Он показывает текст в редакторе, но не красным цветом, см. Изображение ниже -

Редактировать 1

Я создал safepipe , добавляя его, я вижу красный текст, используя innerHtml, но этот текст не отображается в редакторе Quill JS.

  <quill-editor [innerHtml]="dhtml| safe3: 'html'" formControlName="editor"></quill-editor>

См. Изображение ниже: