如何在没有 html 标签的情况下在浏览器上显示 CKeditor 文本？

Question

我正在使用 CKEditor 存储列数据。它与 HTML 标签一起存储。
当我检索要在 CKeditor 中显示的内容时，它会以正确的格式正确呈现。但是当我打算显示 HTML 标签之外的内容时，例如在主页上显示保存的内容，它使用 html 标签
呈现它示例：
我怎样才能在正确的内容中显示它检查图像以显示它是如何渲染的

我保存 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');
        }
      }
    });
  }


}

我的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);
  }

我的html

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

Answer 1

您应该将保存的内容传递到 div 的内部 HTML 属性以呈现 HTML :

示例：

TS :

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

HTML :

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

如何在没有 html 标签的情况下在浏览器上显示 CKeditor 文本？

How to display CKeditot text on the browser without the html tags?

ckeditor

angular