Write Markdown and upload screenshots

We need to archive at
the front desk Code

<div class="editormd" id="test-editormd">
      <textarea class="editormd-markdown-textarea" name="topic_markdown_content" id = "topic_markdown_content">${topic.topic_markdown_content}</textarea>
</div>

Reception quote

<script src="${pageContext.request.contextPath}/fly-3.0/res/editor.md-master/editormd.js"></script>

ajax part

$(function () {
     var testEditor = editormd({
        id: "test-editormd",
        height: 640,
        width: "100%",
        placeholder : "Markdown编辑器",
        path: "${pageContext.request.contextPath}/fly-3.0/res/editor.md-master/lib/",
        toolbarIcons: function () {
        // Or return editormd.toolbarModes[name]; // full, simple, mini
        // Using "||" set icons align right.
        return ["undo", "redo", "|", "watch", "fullscreen", "preview"]
      },
     //toolbar  : false,             // 关闭工具栏
     codeFold: true,
     searchReplace: true,
     saveHTMLToTextarea: true,      // 保存 HTML 到 Textarea
     htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
     emoji: true,
     taskList: true,
     tocm: true,          // Using [TOCM]
     tex: true,                      // 开启科学公式 TeX 语言支持，默认关闭
     //previewCodeHighlight : false,  // 关闭预览窗口的代码高亮，默认开启
     flowChart: true,                // 疑似 Sea.js与 Raphael.js 有冲突，必须先加载 Raphael.js ，Editor.md 才能在 Sea.js 下正常进行；
      sequenceDiagram: true,          // 同上
      //dialogLockScreen : false,      // 设置弹出层对话框不锁屏，全局通用，默认为 true
      //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为 true
      //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为 true
      //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为 0.1
      //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL: "{:url('api/uploader/uploadEditorImg?pic_type=10')}",
      onload: function () {
      this.on('paste', function () {
                    console.log(1);
                 });
                },
       onpreviewing : function() {
       this.watch();
       console.log("onpreviewing =>", this, this.id, this.settings);
       // on previewing you can custom css .editormd-preview-active
       },
       onpreviewed : function() {
         console.log("onpreviewed =>", this, this.id, this.settings);
         this.unwatch();
       }
});

By Markdown upload pictures

          /**
             * 上传图片
             */
            $("#test-editormd").on('paste', function (ev) {
                var data = ev.clipboardData;
                var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                for (var index in items) {
                    var item = items[index];
                    if (item.kind === 'file') {
                        var blob = item.getAsFile();
                        var reader = new FileReader();
                        reader.onload = function (event) {
                            //将剪切板中复制信息转换成一种base64格式字符串
                            var base64 = event.target.result;
                            console.log(base64);
                            //ajax上传图片
                            $.ajax({
                                url : "${pageContext.request.contextPath}/article/uploadimg",
                                type : 'post',
                                data : {'base':base64},
                                async : true,
                                dataType: 'json',
                                success : function (res) {
                                    if (res.code === 1) {
                                        //新一行的图片显示
                                        testEditor.insertValue("\n![" + "image.png" + "](${pageContext.request.contextPath}/" + res.path + ")");
                                    }
                                },
                                error : function(){
                                    alert('图片上传错误');
                                }
                            });
                        }; // data url!
                        var url = reader.readAsDataURL(blob);
                    }
                }
            });

Backstage

    @RequestMapping("/uploadimg")
    @ResponseBody
    public EcholUtils articleUploadImg(String base,HttpServletRequest request){
//      替换字符串中非图片信息
        base= base.replace("data:image/png;base64,","");
//        指定保存上传图片文件夹
        String path=request.getServletContext().getRealPath(File.separator+"upload");
//        如果不存在该文件夹
        File file=new File(path);
        if(!file.exists()){
//            创建文件夹
            file.mkdir();
        }
//        上传图片 UUID保证用户上传图片不重名，将uuid作为图片名
        String uuid= UUID.randomUUID().toString();
        // 指定保存路径
        String strSavePath=path+File.separator+uuid+".jpg";
//      解析上传
        PicEncode.generateImage(base,strSavePath);
        EcholUtils eu= new EcholUtils();
        eu.setPath("upload/"+uuid+".jpg");
        eu.setCode(1);
        return eu;

    }

To create a new folder SpringMVC.xml be released

<mvc:resources location="/upload/" mapping="/upload/**"/>