editormd 支持拖放上传图片和视频

editormd 支持拖放上传图片和视频

在editormd中，有时觉得 点击按钮 => 弹出对话框 => 选择文件这样的上传步骤有些麻烦，要是能支持文件拖放上传，将会是非常不错的用户体验。

实现这个功能，关键点有3个：

• 1. 监听并处理editormd编辑区域的拖放（Drag-Drop）事件
• 1. 放下文件后，获取到文件，通过Ajax上传至后端
• 1. 收到后端返回的视频/图片 url，转换成合适的代码片段，粘贴到编辑器中

这3个部分的功能并不是什么特别新的，拖放事件、Ajax上传文件，以前也处理过了。最后一部分则在前面一篇文章中也讲过了。

1. 监听编辑区的拖放事件

首先我们要找到editormd编辑区域的元素，才能对它进行监听拖放事件。

通过Chrome浏览器调试，发现editormd编辑器的编辑区域是class为.CodeMirror-wrap的元素。参考HTML5拖放事件的写法，代码大致如下：

var codeEditor = $(".CodeMirror-wrap")[0];
codeEditor.ondragenter = function(e) {
   
  e.preventDefault();
  e.stopPropagation();
  console.log("dragenter");
  return false;
};
codeEditor.ondragover = function(e) {
   
  e.preventDefault();
  e.stopPropagation();
  console.log("dragover");
  return false;
};
codeEditor.ondrop =