Question

我正在尝试围绕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应用来帮助演示我的问题。

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

实际： 当我单击该元素时，将触发编辑器上的click事件，并且“ 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 Component

编辑器处理程序服务

模态组件

1 个答案: