फ़ायरफ़ॉक्स में wysiwyg संपादक में एचटीएमएल 5 ड्रैग-ड्रॉप

Question

मेरे पास HTML 5 ड्रैग-ड्रॉप एपीआई का उपयोग करके एक wysiwyg संपादक है जो उपयोगकर्ता को उस पृष्ठ के भीतर विजेट्स रखने की अनुमति देता है, जिसे वे संपादित कर रहे हैं। जब ऑनड्रॉप ईवेंट आग लगती है, तो मैं डिफ़ॉल्ट ईवेंट को रोकता हूं, और संपादक के भीतर कुछ HTML डालता हूं जो उनके द्वारा डाले गए विजेट का प्रतिनिधित्व करता है। मैं फ़ायरफ़ॉक्स में इसके लिए execCommand("inserthtml", false, html) का उपयोग करता हूं।

यह आईई में ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स में एचटीएमएल उस स्थान पर नहीं रखा जाता है जहां इसे गिरा दिया गया था। यह हमेशा उस स्थान पर रखा जाता है जहां पिछला चयन था, जो मुझे विश्वास दिलाता है कि डिफ़ॉल्ट ड्रॉप को ओवरराइड करने के लिए ऑनड्रॉप ईवेंट को रद्द करना भी चयन परिवर्तन को रद्द कर देता है।

इसे हल करने के तरीके पर कोई विचार?

धन्यवाद!

Answer 1

मुझे इन प्रकार के उत्तरों से नफरत है, लेकिन मुझे कहना है, jQuery UI के ड्रैग & ड्रॉप ईवेंट संरचना बहुत सरल है। यह आपको उन ऑब्जेक्ट्स को ट्रैक करने की अनुमति देगा जो आप उपयोग कर रहे हैं और उस HTML को जोड़ दें जो आप जल्दी से बात कर रहे हैं।

यदि आप इससे परिचित नहीं हैं, तो मुझे लगता है कि यह उस प्रणाली के प्रकार के लिए एक शानदार विकल्प है जिसके बारे में आप बात कर रहे हैं।

Answer 2

हाँ, या याहू एक अच्छा समाधान प्रदान करता है, उदाहरण के साथ http://developer.yahoo.com/yui/examples/dragdrop/ पर।

Answer 3

आप कभी भी किसी भी अधिक काम इस पर किया मिला इस

$('.textarea').wysihtml5({ 
    events: { 
     "load": function() { 
     var vm=this; 
      $($('.wysihtml5-sandbox').contents().find('body')).on("dragleave", function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
      }); 

      $($('.wysihtml5-sandbox').contents().find('body')).on("drop", function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
       debugger; 
       var dt = event.originalEvent.dataTransfer; 
         var files = dt.files; 

       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var data = this.result; 
        debugger; 
        vm.composer.commands.exec('insertImage',e.target.result); 
       } 
       reader.readAsDataURL(files[0]); 
      }); 
       $($('.wysihtml5-sandbox').contents().find('body')).on("dragover", function(event) { 
     console.log('graddddd'); 
        event.preventDefault(); 
        event.stopPropagation(); 
        $(this).addClass('dragging'); 
       }); 
     } 
    } 
}); 

https://jsfiddle.net/surajmahajan007/2yu456nw/