Как использовать редактор tinyMCE для редактирования существующего контента?

Question

Я использую редактор tinyMCE, чтобы позволить пользователям создавать текстовые сообщения.В другом компоненте я хотел бы дать пользователю возможность редактировать сообщения, которые он уже создал.Однако у меня возникли проблемы с настройкой редактора, чтобы он инициализировался текстом, который пользователь хочет отредактировать, предварительно загруженным в тело редактора.

Я пытался возиться с различными параметрами formControl, но не смог найти работающую конфигурацию.

Вот файл .ts для компонента edit-post:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { FirebaseObjectObservable } from 'angularfire2/database';
import {PostService} from '../post.service';
import { Post } from '../models/post.model';
import { FormControl } from '@angular/forms';
import { tinyApiKey } from '../api-keys';


@Component({
  selector: 'app-edit-detail',
  templateUrl: './edit-detail.component.html',
  styleUrls: ['./edit-detail.component.css'],
  providers: [PostService]
 })

export class EditDetailComponent implements OnInit {
  postToDisplay;
  postId;
  post = new FormControl('');
  apiKey = tinyApiKey;

  constructor(private route: ActivatedRoute, private postService: 
PostService) { }

  ngOnInit() {
    this.route.params.forEach((urlParameters) =>{
      this.postId = urlParameters['id'];
    });
    this.postToDisplay = this.postService.getPostById(this.postId);
  }

}

и hmtl:

<app-nav-bar></app-nav-bar>
<h1>Edit Post</h1>
  <div class="main">
    <div class="post">
      <p [innerHTML]="(postToDisplay | async)?.content"></p>
      <button id="submit-post"(click)="EditPost();">Edit</button>
    </div>
  </div>

  <div class="post-body">
    <editor [apiKey]="apiKey" FormControl="post" [init]="{plugins: 
'link'}"></editor>
  </div>

А вот файл .ts для компонента, который позволяет пользователям создаватьновые сообщения в блоге (это все работает):

import { Component, OnInit} from '@angular/core';
import { Post } from "../models/post.model"
import { PostService } from '../post.service'
import { FirebaseListObservable } from 'angularfire2/database';
import { FormControl } from '@angular/forms';
import { tinyApiKey } from '../api-keys';


@Component({
  selector: 'app-profile-feed',
  templateUrl: './profile-feed.component.html',
  styleUrls: ['./profile-feed.component.css'],
  providers: [PostService]
})
export class ProfileFeedComponent implements OnInit  {

  postBody = null;
  post = new FormControl('');
   apiKey = tinyApiKey;


  showPostBody(){
    this.postBody = 1;
  }
  createPost(){
    this.postBody = null;
  }
  postSubmitted(post: string){
    const newPost: Post = new Post(post);
    this.postService.addPost(newPost)
  }

  constructor(private postService: PostService) {}


  ngOnInit() {
    // this.setProfileInfo();
  }

}

И HTML для этого компонента:

<div class="feed-post" *ngIf="!postBody">
  <div class="start-post" (click)="showPostBody()">
    <button id="new-post">Start a new blog post!</button>
  </div>
</div>



<div class="post-body" *ngIf="postBody">
  <editor [apiKey]="apiKey" [formControl]="post" [init]="{plugins: 
'link'}"></editor>
  <button id="submit-post"(click)="createPost(); 
postSubmitted(post.value);">Share</button>
  <div *ngIf="post.value"class="preview">
    <div class="">Post Preview: <br></div>
    <div [innerHTML]="post.value"></div>
  </div>
</div>