ड्रॉप लक्ष्य के लिए NG2-DND

Question

मैं दिशानिर्देश यहां दिए गए के अनुसार मेरी angular2 अनुप्रयोग में tinyMCE का उपयोग कर रहा tinyMCE के रूप में:

: https://www.tinymce.com/docs/integrations/angular2/

अब मैं के लिए एक बूंद लक्ष्य के रूप में चाहते हैं इस तरह NG2-DND

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

हालांकि, कोई ईवेंट निकाल दिया नहीं गया है। मुझे लगता है कि टेक्स्टइरा को इफ्रैम के साथ बदलकर tinyMCE के साथ कुछ करना है, लेकिन मैं अभी तक एंजुलर 2 के साथ पर्याप्त परिचित नहीं हूं यह समझने के लिए कि निम्न लिंक यहां कैसे लागू किया जा सकता है। How to make tinymce textarea editor droppable?

किसी भी सुझाव के लिए अग्रिम धन्यवाद!

Answer 1

कुछ ऐसे मुद्दे हैं जो यह काम नहीं करते हैं।

सबसे पहले, जैसा कि बताया गया है, TinyMCE के पास वास्तविक संपादक को प्रस्तुत करने के लिए आईफ्रेम सहित अपने तत्व हैं। Iframe संपादक में घटनाओं का कारण बनता है ऊपर की ओर बुलबुला नहीं।

टेक्सरेरा में डीएनडी-ड्रॉपपेबल जोड़ना, जो छुपा हुआ समाप्त होता है, ड्रॉप करने के लिए कोई दृश्य तत्व नहीं देता है।

टेक्स्टरेरा के चारों ओर एक div तत्व जोड़ना आपको TinyMCE शीर्षलेख में एक ड्रॉप करने योग्य क्षेत्र देगा, लेकिन दुर्भाग्य से संपादक में नहीं। (आईफ्रेम के कारण)।

हालांकि, 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); 
     }); 
    } 
}); 

ध्यान दें कि आपको प्राप्त होने वाली ड्रॉप घटना मानक ड्रॉप-इवेंट है जो डीएनडी के साथ संसाधित नहीं होती है। मुझे लगता है कि यह आपके मामले के लिए ठीक है, और यदि नहीं, तो आप आगे संसाधित करने के लिए डीएनडी दस्तावेज में बदल सकते हैं।