tinyMCE作为ng2-dnd的下降目标

Posted 2021-04-20

我在我的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?

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

答案

有些问题使得这不起作用。

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

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

在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事件，不会使用dnd处理。我认为这对你的情况很好，如果没有，你可以转向dnd文档来进一步处理它。