前

在给拖拉机编写社区时需要用到markDown文本编辑，在这里我先列举部署流程，再写一些我遇到的坑。

上一篇，富文本UEditor部署

editor.md的部署

在使用editor.md部署时没有这么多坑，也并不需要查看太多的源码，但是上传图片的接口需要自己写。

下载地址

解压之后将文件夹改名为editor然后让入static下。目录如下图。

图片.png

然后将examples下的example.html移动到templates下，将所有的静态资源引用都改成这些引用的绝对路径。

然后通过控制器打开example打开就可以看到。

图片.png

设置上传

文章上传的控制器

@Controller
@RequestMapping("/MEditor")
public class MdEditor {
    @Autowired
    NewsMapper newsMapper;
    @PostMapping("/newPublish/{userId}")
    @ResponseBody
    public Result publish(@RequestBody News news, @PathVariable String userId){
        news.setPublishTime(DateUtil.now());
        User user = (User)Local.getSession(userId);
        news.setAuthor(user.getName());
        if(newsMapper.insert(news)>0)
            return Result.success("上传成功").setResult(news.getId());
        else
            return Result.error("上传失败");
    }
}

图片上传的控制器

@Controller
@RequestMapping("/static")
@PropertySource("classpath:application.yml")
public class MdUploadImg {
    @Value("${editor.windowsPath}")
    String windowsPath;
    @Value("${editor.linuxPath}")
    String linuxPath;
    @Value("${editor.MdPrefixUrl}")
    String MdPrefixUrl;
    @PostMapping("/uploadImg")
    @ResponseBody
    public JSONObject uploadImg(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) {
        // 使用自定义的上传路径
        String path;
        if(SystemUtil.isWindows())
            path = this.windowsPath;
        else
            path = this.linuxPath;
        // 调用上传图片的方法
        JSONObject res = FileUtil.uploadFileReturnUrl(request,path,file,MdPrefixUrl);
        System.out.println(res.toString());
        return res;
    }
    @GetMapping("/uploadImg")
    @ResponseBody
    public String d(){
        return "sss";
    }
}

example中的图片上传引用和发布文章

editor的初始化，新建按钮，上传和返回首页

testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "/editor/lib/",
                    codeFold : true,
                    saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                    searchReplace : true,
                    emoji : true,
                    taskList : true,
                    tocm : true,         // Using [TOCM]
                    tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                    flowChart : true,             // 开启流程图支持，默认关闭
                    sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "/static/uploadImg", //这个是上传图片时的访问地址
                    toolbarIcons : function() {
                        return [
                            "undo", "redo", "|",
                            "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                            "h1", "h2", "h3", "h4", "h5", "h6", "|",
                            "list-ul", "list-ol", "hr", "|",
                            "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                            "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                            "help", "info","releaseIcon","index"
                        ]
                    },
                    /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
                    toolbarIconTexts : {
                        releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                        index : "<span bgcolor=\"red\">返回首页</span>",
                    },

                    /*给自定义按钮指定回调函数*/
                    toolbarHandlers:{
                        releaseIcon : function(cm, icon, cursor, selection) {
                            uploadContent();
                        },
                        index : function(){
                            window.location.href = '/';
                        },
                    }
                });

上传按钮的ajax请求

function uploadContent() {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8',
                    url: '/MEditor/newPublish/'+sessionStorage.sessionId,
                    data :JSON.stringify({mdContent:$('#mdContent').val(),content:$('#content').val()
                        ,editorType:2,title:$('#title').val(),newsType:$('#newsType').val()}),
                    dataType: 'json',
                    success: function (data) {
                        var result = data['message'];
                        if(result=="上传成功"){
                            alert(result);
                            $(location).attr('href',"/home/showArticle/"+data['result']);
                        }
                    },
                    error: function (err) {
                        alert(JSON.stringify(err));
                    }
                });
            }

效果图

图片.png