tinyMCE作为ng2-dnd

时间:2016-11-13 18:02:33

标签: javascript angular drag-and-drop tinymce

我根据此处提供的指南在我的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?

提前感谢任何建议!

1 个答案:

答案 0 :(得分: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文档来进一步处理它。