0

我尝试打开一个 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>

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

4

1 回答 1

0

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

于 2020-11-17T08:50:59.460 回答