Question

我有一个var key = CryptoJS.enc.Utf8.parse('XXXXXZNUK5nhIMBbBEwKISqQ9ioXXXXX'); var salt = (this.countryList.response.salt); var iv = CryptoJS.enc.Base64.parse(salt); var decrypted = CryptoJS.AES.decrypt(this.countryList.response.data, key, { keySize: 128 / 8, iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); console.log('utf8 = ' + decrypted.toString(CryptoJS.enc.Utf8));组件，用于使用Angular编辑器显示表单，但是TinyMCE编辑器是一个不同的组件。这是代码：

blog-edit.component.ts：

TinyMCE

blog-edit.component.html

export class BlogEditComponent implements OnInit {
  private data = {};

  constructor(
    private blogService: BlogService,
    private location: Location) {
      if (this.location.path().match(/^\/blog\/edit\/(\d+)$/) ) {
        const id = this.location.path().replace(/^\/blog\/edit\/(\d+)$/, '$1');
        this.loadToEdit( Number(id) );
      }
  }

  loadToEdit(id: number) {
    this.blogService.getOne(id).subscribe(response => {
      const data = response.json();

      // ... here do some data conversion process

      // publish loaded and parsed datas
      this.data = data;

    }, error => {
      // ...
    });
  }
}

tinymce-editor.component.ts：

<app-tinymce-editor elementId="_content" [content]="data.content"
  (editorContentChange)="tinyMcePreviewUpdater($event)"></app-tinymce-editor>

tinymce-editor.component.html

import { Component, Input, Output, EventEmitter,
         AfterViewInit, OnDestroy } from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
// plugins
import 'tinymce/plugins/table';

declare let tinymce: any;

@Component({
  selector: 'app-tinymce-editor',
  templateUrl: './tinymce-editor.component.html',
  styleUrls: ['./tinymce-editor.component.css']
})
export class TinymceEditorComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: string;
  @Input() content: string;
  @Output() editorContentChange = new EventEmitter();

  editor: any;
  opions = {
    selector: undefined,
    setup: undefined,
    // other tinymce init options
  };

  ngAfterViewInit() {
    this.options.selector = '#' + this.elementId;
    this.options.setup = editor => {
      this.editor = editor;
      this.editor.on('keyup change', () => {
        this.editorContentChange.emit( editor.getContent() );
      });
    };

    tinymce.init(this.options);
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }

}

现在的问题是：TinyMCE首先初始化，然后加载数据，并且编辑器的内容没有更新。

当<textarea id="{{ elementId }}" name="{{ elementId }}"></textarea>中出现content变量时，如何更新编辑器的内容？

Answer 1

如果您在每个textarea包含内容之前在每个textarea上初始化TinyMCE，则当textarea更新内容时，TinyMCE不会自动返回并自行更新-TinyMCE只是不能那样工作。

您可以使用TinyMCE API（例如setContent()）

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent）来更新编辑者的

...获取数据后注入内容。另外，您可以延迟初始化TinyMCE，直到将数据提取到每个textarea中为止。

这两种方法都不是更好/更糟-当然有多种方法可以解决此问题，并且如果实施得当，它们都会起作用。

@Input变量更改后，如何在Angular中更新TinyMCE编辑器内容？

1 个答案: