javascript - 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 不会提供任何可见元素。

在文本区域周围添加一个 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);
        });
    }
});

请注意，您收到的放置事件是标准放置事件，未使用 dnd 进行处理。我认为这适合您的情况，如果不行，您可以转向 dnd 文档以进一步处理它。