TinyMCE, как цель перетаскивания для NG2-ДНА

Question

Я использую TinyMCE в моей angular2 приложение в соответствии с директивой Приводимые здесь: https://www.tinymce.com/docs/integrations/angular2/

Теперь я хотел бы в качестве цели капли для NG2-ДНА, как это:

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

Однако события не проводятся. Я полагаю, что это имеет какое-то отношение к tinyMCE, заменяющему textarea iframe, но я еще недостаточно знаком с angular2, чтобы понять, как здесь можно использовать следующую ссылку. How to make tinymce textarea editor droppable?

Заранее благодарим за любые предложения!

Answer 1

Есть некоторые проблемы, из-за которых это не работает.

Во-первых, как уже упоминалось, TinyMCE имеет свои собственные элементы, включая iframe для рендеринга фактического редактора. Iframe приводит к тому, что события в редакторе не перетекают вверх.

Добавление dnd-droppable в тексарию, которая заканчивается тем, что скрыта, не дает видимого элемента, чтобы его можно было накрыть.

Добавление элемента 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-event, которое не обрабатывается с помощью dnd. Я предполагаю, что это нормально для вашего дела, и если нет, вы можете обратиться к документации dnd, чтобы обработать ее дальше.