tinyMCE jako docelową dla NG2 drop-dnd

Question

Używam TinyMCE w moim angular2 aplikacji zgodnie z wytycznymi danej tutaj: https://www.tinymce.com/docs/integrations/angular2/

Teraz chciałbym jako cel upuszczenia dla NG2-DND tak:

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

Jednak żadne zdarzenie nie jest wywoływane. Przypuszczam, że ma to coś wspólnego z tinyMCE zastępującym textarea za pomocą elementu iframe, ale nie jestem jeszcze wystarczająco znajomy z angleular2, aby zrozumieć, w jaki sposób można zastosować poniższy link. How to make tinymce textarea editor droppable?

Z góry dziękuję za wszelkie sugestie!

Answer 1

Występują pewne problemy, które sprawiają, że to nie działa.

Po pierwsze, jak wspomniano, TinyMCE ma własne elementy, w tym element iframe do renderowania edytora. Element iframe powoduje, że zdarzenia w edytorze nie pęcznieją w górę.

Dodanie funkcji dnd-droppable do texarea, która kończy się ukrywaniem, nie daje żadnego widocznego elementu do upuszczenia.

Dodanie elementu div wokół textarea da ci miejsce do zrzucenia w nagłówku TinyMCE, ale niestety nie w edytorze. (ze względu na iframe).

Jednak za pomocą wbudowanych zdarzeń TinyMCE można nadal używać edytora jako celu upuszczania. Musisz również dodać atrybut "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); 
     }); 
    } 
}); 

Należy pamiętać, że wydarzenie drop jest standardowym zdarzeniem typu drop, które nie jest przetwarzane za pomocą dnd. Zakładam, że jest to dobre dla twojej sprawy, a jeśli nie, możesz przejść do dokumentacji dnd, aby ją przetworzyć.