代码之家 › 专栏 › 技术社区 › einarq

HTML5拖放到Firefox中的wysiwyg编辑器中

html5 drag-and-drop editor javascript

einarq · 技术社区 · 15 年前

我有一个wysiwyg编辑器,它使用HTML5拖放api,允许用户在正在编辑的页面中放置小部件。当OnDrop事件触发时,我会阻止默认事件,并在编辑器中插入一些html来表示它们插入的小部件。我用 execCommand("inserthtml", false, html) 在Firefox中。

谢谢!

3 回复 | 直到 15 年前

Trafalmadorian 15 年前

我讨厌这种回答,但我不得不说,jqueryui的拖放事件结构非常简单。它将允许您跟踪您正在使用的对象并快速附加您正在谈论的html。

danjah 15 年前

是的,雅虎提供了一个很好的解决方案,在 http://developer.yahoo.com/yui/examples/dragdrop/ .

suraj mahajan 8 年前

试试这个

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