tinyMCE as drop target for ng2-dnd

Question

I'm using tinyMCE in my angular2 app according to the guideline given here: https://www.tinymce.com/docs/integrations/angular2/

Now I would like as a drop target for ng2-dnd like this:

<textarea dnd-droppable (onDropSuccess)="itemDropped($event)" id="{{elementId}}"></textarea>

However, no event is fired. I suppose this has something to do with tinyMCE replacing the textarea with an iframe, but I'm not yet familiar enough with angular2 to understand how the following link could be applied here. How to make tinymce textarea editor droppable?

Thanks in advance for any suggestions!

Answer 1

There are some issues that makes this not work.

Firstly, as mentioned, TinyMCE has its own elements including an iframe for rendering the actual editor. The iframe causes events in the editor not to bubble upwards.

Adding dnd-droppable to the texarea, which ends up being hidden, does not give any visible element to drop on.

Adding a div element around the textarea will give you a droppable area in the TinyMCE header, but unfortunately not in the editor. (due to the iframe).

However, using the TinyMCE built-in events, you can still use the editor as a drop-target. You also need to add the 'paste_data_images' attribute.

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);
        });
    }
});

Note that the drop event you receive is a standard drop-event which is not processed with dnd. I assume this is fine for your case, and if not you can turn to dnd documentation to process it further.