editormd 支持拖放上传图片和视频
在editormd
中,有时觉得 点击按钮 => 弹出对话框 => 选择文件
这样的上传步骤有些麻烦,要是能支持文件拖放上传,将会是非常不错的用户体验。
实现这个功能,关键点有3个:
-
- 监听并处理
editormd
编辑区域的拖放(Drag-Drop)事件
- 监听并处理
-
- 放下文件后,获取到文件,通过
Ajax
上传至后端
- 放下文件后,获取到文件,通过
-
- 收到后端返回的视频/图片 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 =