大家好,欢迎来到IT知识分享网。
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 = function(e) {
e.preventDefault();
e.stopPropagation();
console.log("drop");
var files = e.dataTransfer.files // 这里获取到用户拖放的文件
console.log(files);
// 其中 ajaxUpload是Ajax上传文件的函数
// uploadUrl是后端提供的上传地址, uploadCallback是上传后的回调函数,用于生成代码片段并插入编辑器
ajaxUpload(uploadUrl, files, uploadCallback);
return false;
};
把这部分代码放在editormd
创建后的onload
回调函数中,保证$(".CodeMirror-wrap")[0]
可以取到值。
2.Ajax上传图片/视频
Ajax
上传图片,相信大家已经写过不少了。忘了没关系,这里有代码可以抄。
ajaxUpload
函数代码大致如下:
function ajaxUpload(uploadUrl, files, callback) {
console.log("my ajax upload begin");
var formData = new FormData();
formData.append('file', files[0]);
// 可以添加其他需要传给后端的参数
$.ajax({
url: uploadUrl,
type: 'POST',
data: formData,
processData: false, // must, important
conentType: false, // must, important
dataType: 'json',
success: function(data) {
console.log("result:", data);
callback(data);
},
complete: function(data) {
}
});
return false;
}
3. 生成代码片段,插入编辑器
这部分代码,可以从上一篇文章中借过来。uploadCallback
函数的代码大致如下
function uploadCallback(data) {
var url = data.data.url; // 依据后端返回的数据格式而定
var link = url;
if (!url) return false;
var alt = "";
var cm = myEditormd; // myEditormd是用editormd函数创建的编辑器对象,这里假设myEditor是全局变量
var cursor = cm.getCursor(); // 获取光标位置
if (url.endsWith(".mp4")) { // 如果是是视频
var videoHtml = '<video class="video-js" controls preload="auto" width="100%" poster="" data-setup=\'{"aspectRatio":"16:9"}\'>\ <source src="' + url + '" type=\'video/mp4\' >\ <p class="vjs-no-js">\ To view this video please enable JavaScript\ </p>\ </video>';
videoHtml = "\n" + videoHtml + "\n"; // videoHtml是生成的HTML视频代码片段
cm.replaceSelection(videoHtml); // 插入到编辑器中
cm.setCursor(cursor.line, cursor.ch + 2);
return;
}
// 以下是对图片上传结果的处理,引用原image-upload插件的代码
var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
if (link === "" || link === "http://")
{
cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
}
else
{
cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
}
if (alt === "") {
cm.setCursor(cursor.line, cursor.ch + 2);
}
}
这样,我们的editormd
编辑器支持拖放上传图片和视频了!
4. 其它
上传的时候,如果文件比较大,需要等待一段时间,这时,最好在编辑区域加上一个显示“正在上传”的加载框,上传后关闭之,这样,用户知道发生了什么。
项目中用的是Vue
,使用了饿了么的了Element-ui
组件,可以用它提供的的$loading
方法来显示加载框,在调用ajax
方法上传文件之前插入如下代码:
var loading = that.$loading({ // that是vue实例
lock: false,
text: '上传中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)',
target: '.CodeMirror-wrap',
});
// 假如下面这行代码是因为Element-ui在编辑区显示的遮罩效果太黑了,而且通过`background`选项调整不过来
$(".el-loading-mask").css({
'background-color': 'rgba(0,0,0,0.7)'});
然后在ajax
的complete'
回调中关闭loading
。
$.ajax({
...
complete: function() {
loading.close();
}
});
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/25153.html