Question

我正在使用TinyMCE WYSIWYG编辑器。每次，我在编辑器中输入内容时，都会触发事件onEditorKeyup，该事件会触发方法keyupHandlerFunction($event)。其实施如下：

app.component.html

<simple-tiny
  [elementId]="'my-editor-id'"
  (onEditorKeyup)="keyupHandlerFunction($event)"
>
</simple-tiny>
<br>

<div>{{blogContent}}</div> <!--=====Line 1: Doesn't show anything ==-->

<br>

<button (click)="doSomething()"> click me!</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

      title = 'app';
      blogContent;

      keyupHandlerFunction(event){

        this.blogContent=event;
        console.log(this.blogContent);//=================Line2: work fine ==================
      }

      doSomething(){
        console.log(this.blogContent);
      }
    }

现在：

第1行根本不显示任何内容。理想情况下，它应该显示我输入的编辑内容。
第2行完美无缺。它实时记录我输入的内容
如果单击按钮，第1行将显示内容。这很奇怪，因为除了记录内容之外，按钮的听众不会做任何事情。

我不认为这是TinyMCE的问题，因为第2行日志确实可以正常工作。

编辑：添加tinyMCE组件：simple-tiny-component.component.ts

简单微小-component.component.ts

import {
  Component,
  OnDestroy,
  AfterViewInit,
  EventEmitter,
  Input,
  Output
} from '@angular/core';

declare var tinymce: any;

@Component({
  selector: 'simple-tiny',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleTinyComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorKeyup = new EventEmitter<any>();

  editor;

  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['link', 'paste', 'table'],
      skin_url: 'assets/skins/lightgray',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
      },
    });
  }

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

Answer 1

试试这个，我认为问题是WYSIWYG正在生成html，但你不能真正以你的方式显示html：

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

Answer 2

我一直在为此做一些研究，以下是我的想法：了解Angular何时触发数据更改检测（CD）非常重要。 This is a good article about the topic.

这使我们得出结论，基本上每当执行某些异步操作时，我们的应用程序状态可能已经改变。这是有人需要告诉Angular更新视图的时候。

但是，如果CD恰好在所有异步事件（keypress，mousemove）上启动，那么效率会很低。这是区域进入图片的地方。 Angular区域将触发CD内部的所有异步操作，但不会触发其外部的异步操作。

＆＃34;第1行根本不显示任何内容。理想情况下，它应该在我输入时显示编辑器的内容。＆＃34; 这是因为Angular尚未调用触发事件onEditorKeyup的异步回调而是TinyMCE。因此，当触发onEditorKeyup时，角度变化检测不会运行。
＆＃34;如果单击按钮，第1行将显示内容。这很奇怪，因为除了记录内容之外，按钮的听众不会做任何事情。＆＃34;。这是因为当单击按钮时，其角色触发其侦听器，从而触发更改检测。因此在视图中得到了更新。

我对区域和CD仍然有点模糊。随着我的理解的发展，我将保持这个答案更新。

通过字符串插值绑定的数据不会实时更新，角度为

2 个答案: