tinyMCE的作爲放置目標

我根據這裏給出的指導方針將TinyMCE在我angular2應用的NG2-DND：https://www.tinymce.com/docs/integrations/angular2/tinyMCE的作爲放置目標

現在，我想作爲一個放置目標NG2-DND是這樣的：

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

但是，沒有發生任何事件。我想這與tinyMCE用iframe替換textarea有關，但我還不太瞭解angular2，以瞭解如何在此處應用以下鏈接。 How to make tinymce textarea editor droppable?

在此先感謝您的任何建議！

來源

2016-11-13 Martin Schulze

您是否最終找到解決方案？我需要實施類似的事情，並會很感激任何幫助。 :) –

你是否設置了任何讓tinyMCE知道textarea是一個tinyMCE DOM元素的東西？你的組件是什麼樣的？ –

@ mc.suchecki不幸的不是。我最終在編輯器上面添加了一個放置區域，這對我的原型用例來說沒問題......但請分享您最終使用的任何內容:-) –

有一些問題，使這不起作用。首先，如前所述，TinyMCE有其自己的元素，包括用於渲染實際編輯器的iframe。 iframe導致編輯器中的事件不會向上冒泡。

將dnd-droppable添加到最終隱藏的texarea中，不會顯示任何可見元素。

在textarea周圍添加一個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); 
     }); 
    } 
});

請注意，您收到的放置事件是標準放置事件，不會用dnd處理。我認爲這對你的情況很好，如果沒有，你可以轉向dnd文檔來進一步處理它。

來源

2017-12-26 20:30:27 jornare

好主意，謝謝！我需要指出一個正確的方向。 :)我今天會嘗試這種方法並報告結果 - 也許我可以在這裏發佈完整的解決方案以供將來參考。我想保持現在的懸賞狀態，但是到目前爲止，您的答案當然是最好的。 ;） –

tinyMCE的作爲放置目標

回答

相關問題