Как отобразить текст CKeditot в браузере без тегов html?

Question

Я храню данные столбца с помощью CKEditor. который хранит его рядом с тегами HTML.
, когда я получаю содержимое для отображения в CKeditor, он правильно отображает в нужном формате. но когда я намереваюсь отобразить контент вне тегов HTML, например, отобразить сохраненный контент на домашней странице, он отображает его с помощью html tags
пример:
как я могу отобразить его в правом изображение проверки содержимого для отображения того, как оно отображается

Моя машинопись для сохранения содержимого Ckeditor:

    import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {TycketService} from "../../../services/tycket.service";
import {Router} from "@angular/router";
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'kt-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.scss']
})
export class AddPostComponent implements OnInit {
  addPostForm: FormGroup;
  submitted = false;
  imageUrl = '';
  user: any;
  fileToUpload: File = null;
  published: boolean = false;
  public content;
  ERRORMESSAGE: any = '';
  SUCCESSMESSAGE: any = '';
  public Editor = ClassicEditor;
  editorData: any;
  constructor(private formBuilder: FormBuilder,
              private service: TycketService,
              private route: Router
              ) { }

  ngOnInit() {
    this.addPostForm = this.formBuilder.group({
      title: ['', Validators.required],
      category: ['', Validators.required],
      image: ['', Validators.required]
    });
    this.user = this.service.getUserData();
    this.user = this.user['email'];
  }
  public onChange( { editor } ) {
    this.editorData = editor.getData();
  }

  handleFileInput(file: FileList) {
    this.fileToUpload = file.item(0);
  }
  publishToggle(){
    this.published = !this.published;
    console.log(this.published);
  }
  onClickSubmit() {
    let formData = new FormData();
    formData.append('title', this.addPostForm.controls.title.value);
    formData.append('category', this.addPostForm.controls.category.value);
    formData.append('content', this.editorData);
    formData.append('image[]', this.fileToUpload, this.fileToUpload.name);
    formData.append('belongs_to', this.user);
    if(this.published === true) {
      formData.append('publish', 'true');
    }
    console.log(this.addPostForm.controls);
    this.submitted = true;
    if (this.addPostForm.invalid) {
      console.log('invaliddd');
      return;
    }
    this.service.addpost(formData).subscribe(res => {
      if (res['status'] !== '200') {
        this.ERRORMESSAGE = res['error'];
      } else {
        this.SUCCESSMESSAGE = res['message'];
        if (this.published) {
          this.route.navigateByUrl('/admin/posts');
        } else {
          this.route.navigateByUrl('/admin/unpublished');
        }
      }
    });
  }


}

My HTML:

<ckeditor (change)="onChange($event)" [editor]="Editor"  data="<p>Post your content!</p>"></ckeditor>

Моя машинопись для получения сохраненного контента:

  ngOnInit() {
    // this.user = this.service.getUserData();
    // this.user = this.user['email'];
    this.service.getpublishedPost('somtobuchi@gmail.com').subscribe(response => {
      this.userPosts = response['response'];
      this.postlen = this.userPosts.length;
      for (let i = 0; i < this.postlen; i++){
        this.images.push(this.service.imagebaseUrl(this.userPosts[i]['image']));
        this.posts[i] = {
          id: i,
          postid: this.userPosts[i]['id'],
          title: this.userPosts[i]['title'],
          category: this.userPosts[i]['category'],
          content: this.userPosts[i]['content'],
          created_at: this.userPosts[i]['created_at'],
          published_at: this.userPosts[i]['published_at'],
          image: this.images[i]
        };
      }
    });
    console.log(this.posts);
  }

my html

     <div class="post-content">
         {{posts[0].content}}
     </div>

Answer 1

Вы должны передать сохраненный контент во внутреннее HTML свойство вашего div, где вы хотите отобразить HTML:

Пример:

TS:

content = '<h3>HTML Test</h3>';

HTML:

<div [innerHTML]="content"> </div>