富文本编辑器 django-mdeditor如何复制粘贴图片

django-mdeditor实现了后端的富文本输入，但发现图片仅能上传实现，不如复制粘贴来的方便。为了让用户能够方便地插入和编辑图像，百度找到了如下的方法来实现复制粘贴图片的功能。这样，用户可以直接在编辑器中粘贴图片，图片将被上传到服务器并显示在编辑器中，为编辑内容增添丰富的视觉元素。特地记录一下。 解决方法如下：

1、找到文件\site-packages\mdeditor\templates\markdown.html文件

2、找到<script type="text/javascript">这行

3、这行及以下所有内容删除，也就是把js这块代码全删除了，把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>

如果是docker部署，那可以在Dockerfile里面实现文件的复制，直接替换掉markdown.html

COPY markdown.html /usr/local/lib/python3.8/site-packages/mdeditor/templates/markdown.html