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来理解如何在这里应用以下链接. 如何使tinymce textarea编辑器可以删除？

在此先感谢您的任何建议!

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 文档来进一步处理它。