tinyMCE 作为 ng2-dnd 的放置目标

Question

我根据此处给出的指南在我的 angular2 应用程序中使用 tinyMCE：https://www.tinymce.com/docs/integrations/angular2/

现在我想像这样作为 ng2-dnd 的放置目标：

<textarea dnd-droppable (onDropSuccess)="itemDropped($event)" id="{{elementId}}"></textarea>

但是，没有触发任何事件。我想这与 tinyMCE 用 iframe 替换 textarea 有关，但我对 angular2 还不够熟悉，无法理解如何在此处应用以下链接。 How to make tinymce textarea editor droppable?

提前感谢您的任何建议！

Answer 1

有一些问题导致这不起作用。

首先，如前所述，TinyMCE 有自己的元素，包括用于渲染实际编辑器的 iframe。 iframe 导致编辑器中的事件不会向上冒泡。

将 dnd-droppable 添加到最终被隐藏的 texarea 不会给任何可见元素放置。

在 textarea 周围添加一个 div 元素会在 TinyMCE 标头中为您提供一个可放置区域，但遗憾的是在编辑器中没有。 （由于 iframe）。

但是，使用 TinyMCE 内置事件，您仍然可以将编辑器用作放置目标。您还需要添加“paste_data_images”属性。

tinymce.init({
    selector: '#' + this.elementId,
    plugins: ['link', 'paste', 'table'],
    skin_url: 'assets/skins/lightgray',
    paste_data_images: true,
    setup: editor => {
        editor.on('drop', e => {
            console.log(e);
        });
    }
});

请注意，您收到的 drop 事件是标准的 drop-event，不使用 dnd 处理。我认为这对您的情况很好，如果不是，您可以转向 dnd 文档以进一步处理它。