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

Question

我正在尝试围绕 tinyMce 的 wordpress 实例构建一个 angular 应用程序。在编辑器中有一些内容不可编辑的元素，点击这些元素会在 tinymce 编辑器之外打开一个模态 window。

但是，当单击该元素时，只有当用户将鼠标移出位于编辑器内部的 iframe 之外时，模式才会打开。

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

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

编辑器处理程序服务

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 应用程序来帮助演示我的问题。

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

实际： 当我单击该元素时，编辑器上的单击事件会触发，并且 "Opening" 消息也会记录到控制台。但是，直到用户将鼠标移出位于编辑器内部的 iframe 之外，模态才会变得可见。

Answer 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

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

Event fired by tinymce editor does not update Angular Component right away

tinymce

angular

编辑器处理程序服务

模态组件