HTML 5 arrastrar y soltar en el editor wysiwyg en Firefox

Question

Tengo un editor wysiwyg usando la aplicación de arrastrar y soltar HTML 5 para permitir al usuario colocar widgets dentro de la página que está editando. Cuando se dispara el evento OnDrop, evito el evento predeterminado e inserto un html dentro del editor que representa el widget que insertaron. Yo uso execCommand("inserthtml", false, html) para esto en Firefox.

Esto funciona bien en IE, pero en Firefox, el html no se coloca en la ubicación donde se eliminó. Siempre se coloca en la ubicación donde estaba la selección anterior, lo que me lleva a pensar que cancelar el evento OnDrop para anular la caída predeterminada también cancela el cambio de selección.

¿Alguna idea sobre cómo solucionar esto?

Gracias!

Answer 1

Odio este tipo de respuestas, pero tengo que decir que la estructura del evento drop de jQuery UI & es bastante sencilla. Le permitiría rastrear los objetos que está usando y agregar el html del que está hablando rápidamente.

Si no está familiarizado con él, creo que es una excelente opción para el tipo de sistema del que está hablando.

Answer 2

Sí, o YAHOO ofrece una buena solución, con ejemplos en http://developer.yahoo.com/yui/examples/dragdrop/.

Answer 3

probar este

$('.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/