如何打开 TinyMCE 5 对话框，其中包含 Angular 10 组件作为正文内容？

Question

我尝试打开一个 TinyMCE 5 对话框，其中包含一个 Angular 10 组件作为 body 内容。

我试过这段代码，但卡住了：

// tslint:disable: object-literal-key-quotes
import { Component, Input, ViewChild } from '@angular/core';
import { PhotoalbumComponent } from 'src/app/components/photoalbum/photoalbum.component';

declare let tinymce: any;

@Component({
  selector: 'app-tinymce-editor',
  templateUrl: './tinymce-editor.component.html',
  styleUrls: ['./tinymce-editor.component.css']
})
export class TinymceEditorComponent {
  @ViewChild(PhotoalbumComponent) photoalbum: PhotoalbumComponent;

  myContent = '';
  editor: any;
  options = {
    setup(editor: any): void {
      editor.ui.registry.addButton('myimage', {
        icon: 'image',
        onAction(): void {
          editor.execCommand('openImageDialog', false, null);
        }
      });

      editor.addCommand('openImageDialog', (ui: any, v: any) => {
        editor.windowManager.open({
          size: 'large',
          title: 'Images',
          body: {
            type: 'panel',
            items: [
              {
                type: 'htmlpanel',
                html: this.photoalbum,
              }
            ]
          },
          buttons: [],
        });
      });
    },
  };
}

在 tinymce-editor.component.html 文件中：

<editor apiKey="myApiKey" [init]="options" [(ngModel)]="myContent"></editor>

关于如何在对话框正文中显示组件生成的内容或我需要阅读什么才能继续前进，是否有任何最佳实践或建议？

Answer 1

TinyMCE 不支持直接在对话框中呈现自定义 UI，主要是由于 CSS 级联问题。对于这些更高级的用例，您可以使用 URL dialog type 在 iframe

中呈现对话框正文内容

如何打开 TinyMCE 5 对话框，其中包含 Angular 10 组件作为正文内容？

How to open a TinyMCE 5 dialog, what contains an Angular 10 component as body content?

angular

tinymce

tinymce-5