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内置事件，您仍然可以将编辑器用作放置目标。您还需要添加＆＃39; paste_data_images＆＃39;属性。

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

tinyMCE作为ng2-dnd

1 个答案: