tinymce 编辑器触发的事件不会立即更新 Angular 组件答案

【问题标题】：Event fired by tinymce editor does not update Angular Component right awaytinymce 编辑器触发的事件不会立即更新 Angular 组件
【发布时间】：2019-04-20 02:02:26
【问题描述】：

我正在尝试围绕 tinyMce 的 wordpress 实例构建一个有角度的应用程序。在编辑器内部有非内容可编辑的元素，单击这些元素会在 tinymce 编辑器之外打开一个模式窗口。

但是，当单击元素时，模式不会打开，直到用户将鼠标移到位于编辑器内的 iframe 之外。

我有一项服务可以设置 tinymce 编辑器。该服务注册了一个单击事件处理程序，当单击该处理程序时，将通过主题对象发出一个事件。

我的模态类订阅了主题，这将导致在单击元素时打开模态。

编辑器处理服务

private clickSubject: Subject<HTMLElement>;
public clickEvent:Observable<HTMLElement>;

private editorSetup(editor: TinyMceEditor) {
    editor.on("DblClick", e => {
        let elm = e.target as HTMLElement;
        this.clickSubject.next(elm);
    });
}

模态组件

private open(elm:HTMLElement){
    this.isOpen = true;
    console.log("Opening");
}
ngOnInit() {
    this.editorHandler.clickEvent.subscribe(elm =>this.open(elm));
}

我创建了一个StackBlitz 应用来帮助演示我的问题。

预期： 单击位于编辑器中的元素将立即打开一个模式。

实际： 当我单击元素时，编辑器上的单击事件会触发，并且“正在打开”消息也会记录到控制台。但是，在用户将鼠标移到位于编辑器内部的 iframe 之外之前，模态框不会变得可见。

【问题讨论】：

标签： angular tinymce

【解决方案1】：

在这种情况下，最可能的原因是您的代码在根区域中执行，但应该在 Angular 区域中执行。

您可以使用NgZone.run 方法修复它：

@Component({
  selector: 'app-tiny-editor',
  templateUrl: './tiny-editor.component.html'
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  ...

  constructor(private zone: NgZone, ...) { }

  ngAfterViewInit() {
    tinymce.init({
      ...
      setup: editor => {
        this.editor = editor;
        editor.on('dblclick', (e) => {
          let elm = e.target;
          console.log("clicked!");

          this.zone.run(() => {   <============================== make sure we're in ng zone
            this.editorHandler.editorSubject.next(elm);
          });

        });
      }
    });
  }
}

Forked Stackblitz

【讨论】：