mdeditor支持图片粘贴上传 | cxx1.com原创博客网站、Django建站、数学、物理、化学、第一原创网。打造中国第一原创博客网，第一python博客，原创第一、博客第一

CXX1.COM专注内容视图分离

mdeditor支持图片粘贴上传

4319 views

------------

# mdeditor 如何支持图片截屏粘贴上传？

> 原博客地址 https://rumenz.com/rumenbiji/

function initPasteDragImg(Editor){
		var doc = document.getElementById(Editor.id)
		doc.addEventListener('paste', function (event) {
			var items = (event.clipboardData || window.clipboardData).items;
			var file = null;
			if (items && items.length) {
				// 搜索剪切板items
				for (var i = 0; i < items.length; i++) {
					if (items[i].type.indexOf('image') !== -1) {
						file = items[i].getAsFile();
						break;
					}
				}
			} else {
				console.log("当前浏览器不支持");
				return;
			}
			if (!file) {
				console.log("粘贴内容非图片");
				return;
			}
			uploadImg(file,Editor);
		});
		var dashboard = document.getElementById(Editor.id)
		dashboard.addEventListener("dragover", function (e) {
			e.preventDefault()
			e.stopPropagation()
		})
		dashboard.addEventListener("dragenter", function (e) {
			e.preventDefault()
			e.stopPropagation()
		})
		dashboard.addEventListener("drop", function (e) {
			e.preventDefault()
			e.stopPropagation()
		 var files = this.files || e.dataTransfer.files;
		 uploadImg(files[0],Editor);
		 })
	}
	function uploadImg(file,Editor){
		var formData = new FormData();
		var fileName=new Date().getTime()+"."+file.name.split(".").pop();
		formData.append('editormd-image-file', file, fileName);
		$.ajax({
			url: Editor.settings.imageUploadURL,
			type: 'post',
			data: formData,
			processData: false,
			contentType: false,
			dataType: 'json',
			success: function (msg) {
				var success=msg['success'];
				if(success==1){
					var url=msg["url"];
					if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
						Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");
					}else{
						Editor.insertValue("[下载附件]("+msg["url"]+")");
					}
				}else{
					console.log(msg);
					alert("上传失败");
				}
			}
		});
	}

## 现在问题来了如何让 Django 支持因为在这个里面只做了其 php 的demo

## 一、 下载 js 文件

> 把下载好的文件放到如下文件夹下面

/root/python/env/djangoblog/lib/python3.6/site-packages/mdeditor/static/mdeditor/js

> uploadImg.js 是我们要放的

## 二、 配置 mdeditor

> 找到/root/python/env/djangoblog/lib/python3.6/site-packages/mdeditor/templates 下面的 markdown.html

> 找到最下面的地方添加

```javascript
onload: function () {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

//this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
                 initPasteDragImg(this); //必须
            }

```

# 现在markdown就支持图片粘贴上传了

评论0

您还没有登录，请您登录后发表评论。