前言

一直喜欢用MD作为主要的编辑器，喜欢MD的高效和简洁，但是django-mdeditor不支持复制粘贴的方式上传图片。为了解决这个问题，有了这篇文章。

基础准备

已经安装好了django-mdeditor插件

教程开始

找到django-mdeditor安装包的路径，必须是当前项目的Python环境，一般一个项目一个Python。

然后修改\site-packages\mdeditor\templates\markdown.html文件，我们要做的就是在让django-mdeditor的页面支持复制粘贴功能，这需要增加js代码。

为了简化大家的使用，我直接附上完整代码，大家直接做替换就好。

找到markdown.html文件的 <script type="text/javascript">这行，然后把这行及以下所有内容删除，也就是把js这块代码全删除了。

删完以后，把以下完整代码复制粘贴到当前位置。

<script type="text/javascript">

  $(function () {
    editormd("{{ id }}-wmd-wrapper", {
      watch: {{ config.watch|lower }}, // 关闭实时预览
    lineNumbers: {{ config.lineNumbers|lower }},
    lineWrapping: {{ config.lineWrapping|lower }},
    width: "{{ config.width }}",
            height: {{ config.height }},
    placeholder: '{{ config.placeholder }}',
            // 当有多个mdeditor时，全屏后，其他mdeditor仍然显示，解决此问题。
            onfullscreen : function() {
      this.editor.css("border-radius", 0).css("z-index", 9999);
    },
    onfullscreenExit : function() {
      this.editor.css({
        zIndex : 10,
        border : "1px solid rgb(221,221,221)"
      })
    },
    syncScrolling: "single",
            path: "{% static  'mdeditor/js/lib' %}" + "/",
            // theme
            theme : "{{ config.theme|safe }}",
            previewTheme : "{{ config.preview_theme|safe }}",
            editorTheme : "{{ config.editor_theme }}",

            saveHTMLToTextarea: true, // editor.md 有问题没有测试成功
            toolbarAutoFixed: {{ config.toolbar_autofixed|lower }},
    searchReplace: {{ config.search_replace|lower }},
    emoji: {{ config.emoji|lower }},
    tex: {{ config.tex|lower }},
    taskList: {{ config.task_list|lower }},
    flowChart: {{ config.flow_chart|lower }},
    sequenceDiagram: {{ config.sequence|lower }},

    // image upload
    imageUpload: true,
            imageFormats: {{ config.upload_image_formats|safe }},
    imageUploadURL: "{{ config.upload_image_url }}",
            toolbarIcons: function () {
      return {{ config.toolbar|safe }}
    },
    onload: function () {
      initPasteDragImg(this); //必须
      console.log('onload', this);
      //this.fullscreen();
      //this.unwatch();
      //this.watch().fullscreen();

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

  });

  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);
    formData.append('content', '');
    $.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("上传失败");
        }
      }
    });
  }

</script>

然后重启Django服务，在admin编辑器框里直接复制粘贴图片，即可实现复制粘贴上传图片功能。

参考文档：https://blog.51cto.com/u_15127506/4148322