Question

我正在使用tinyMCE编辑器来允许用户创建文本帖子。在另一个组件中，我希望使用户能够编辑他们已经创建的帖子。但是，我在配置编辑器时遇到麻烦，因此它无法使用用户要编辑的文本进行初始化，而该文本要预先加载在编辑器主体中。

我曾尝试使用不同的formControl选项，但找不到能正常工作的配置。

这是编辑后组件的.ts文件：

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>

如何使用tinyMCE编辑器编辑现有内容？

0 个答案: