- 1.Editor.md介绍

先看一下效果图，是你想要的结果继续往下看
在这里插入图片描述
官网介绍

支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；
支持自定义主题样式；

2.下载

官网 http://editor.md.ipandao.com/
github地址 https://github.com/pandao/editor.md.git

下载官网的zip，解压

3.开始

创建springboot项目，添加依赖

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
        </dependency>

        <!-- zip处理包 -->
        <dependency>
            <groupId>org.apache.ant</groupId>
            <artifactId>ant</artifactId>
            <version>1.9.9</version>
        </dependency>
    </dependencies>

项目结构
在这里插入图片描述
把解压的文件放在static目录下面的editor里面，
创建一个index页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Asciidoctor 1.5.6.1">
    <title>md在线编辑</title>
    <link rel="stylesheet" href="/editor/css/editormd.min.css" />
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/editor/src/editormd.js"></script>
</head>
<body>
<div class="editormd" id="test-editormd">
    <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
    <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
    <textarea class="editormd-html-textarea" name="text"></textarea>
</div>

<script type="text/javascript">
    $(function() {
        var testEditor;
        testEditor = editormd("test-editormd", {
            placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "/editor/lib/",   //就是editor的lib目录
            theme: "dark",//工具栏主题
            previewTheme: "dark",//预览主题
            editorTheme: "pastel-on-dark",//编辑主题
            saveHTMLToTextarea: true,
            emoji: false,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            imageUpload: true,     //开启图片上传
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/img/imgUpLoad", //上传的路径，就是mvc的controller路径
            toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
                return editormd.toolbarModes['full']; // full, simple, mini
            },
        });
    });
</script>
</body>
</html>

这里需要注意的是jquery的依赖，这里就可以编辑了
但是图片上传还是需要后台配置一下的


@Controller
public class SupplierController {
 	//页面跳转的controller
    @RequestMapping("sys/md/{doc}")
    public String editMdDoc(@PathVariable("doc") String doc){
        return "md/"+doc;
    }
    @RequestMapping("sys/read")
    public String readMd(){
        return "md/show/show";
    }


}

@RestController
@RequestMapping("/img")
public class ImgUpController {
	//上传图片的配置，用的是commons工具，文件存储路径为项目以外
    @PostMapping("/imgUpLoad")
    public MdResult imgUpLoad(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file){
        String rootPath = "F:/download/md/img/";
        String path = rootPath + file.getOriginalFilename();
        try {
            file.transferTo(new File(path));
        } catch (IOException e) {
            e.printStackTrace();
        }

        return new MdResult(1,"上传成功","/image/"+file.getOriginalFilename());
    }
    //MdResult的返回类型，注意返回的格式success，message，url
    public class MdResult {
    public Integer success;

    public String message;

    public String url;

    public MdResult(Integer success, String message, String url) {
        this.success = success;
        this.message = message;
        this.url = url;
    }
}

返回的url就是/image/VCG211164345140.jpg，相当于img标签的链接，因为我这上传的路径不在项目目录下，
配置一下

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
 

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/image/**").addResourceLocations("file:F:/download/md/img/");
    }
}

目前编辑页面就已经完成了，里面的路径都是写死的，

展示页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>md文件展示</title>
    <link rel="stylesheet" type="text/css" href="/editor/css/editormd.css" />
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/editor/src/editormd.js" type="text/javascript" charset="utf-8"></script>

    <script src="/editor/lib/marked.min.js"></script>
    <script src="/editor/lib/prettify.min.js"></script>
    <script src="/editor/lib/raphael.min.js"></script>
    <script src="/editor/lib/underscore.min.js"></script>
    <script src="/editor/lib/sequence-diagram.min.js"></script>
    <script src="/editor/lib/flowchart.min.js"></script>
    <script src="/editor/lib/jquery.flowchart.min.js"></script>
</head>
<body>
<div id="wordsView">
            <textarea style="display:none;" name="editormd-markdown-doc" id="mdText">
             </textarea>
</div>

<script type="text/javascript">
    $(function() {
        $.get('/sys/show/Centos7.md',function(result){
            if(result.errorCode==1){
                return ;
            }else{
                $("#mdText").html(result.data.data);
                wordsView = editormd.markdownToHTML("wordsView", {
                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                    emoji           : true,
                    taskList        : true,
                    tex             : true,  // 默认不解析
                    flowChart       : true,  // 默认不解析
                    sequenceDiagram : true  // 默认不解析
                });
            }

        });
        //})
    });
</script>
</body>
</html>

里面的js看情况引用，直接全部复制也行
因为这里采用的是读取外部md文件，写一个读取的方法

@RestController
@RequestMapping("/sys")
public class ShowMdController {
	//文件根据需要自己选择
    @GetMapping("/show/{id}")
    public ApiResult showMd(@PathVariable("id")String id){
        String json = "";
        try {
            json = FileUtils.readFileToString(new File("F:/download/md/test.md"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return ResultUtils.buildSucessObject(json);
    }
}

访问链接就可以了

4. 补充(2019-10-24)

1.返回前端的实例类


public class ResultUtils{
    public static final String SUCESS_MSG = "处理成功";
    public static final String FAILED_MSG = "处理失败";

    public static final Integer SUCESS_CODE = 0;
    public static final Integer FAILED_CODE = 1;
    private ResultUtils(){

    }

    public static ApiResult buildError(Integer errorCode,String msg){
        return new ApiResult(errorCode,msg,null);
    }

    public static ApiResult buildSucessObject(Object data){
        return new ApiResult(SUCESS_CODE,SUCESS_MSG,data);
    }

    public static ApiResult buildSucess(){
        return new ApiResult(SUCESS_CODE,SUCESS_MSG,null);
    }

    public static class ApiResult {
        private ApiResult(Integer errorCode, String msg, Object data) {
            this.errorCode = errorCode;
            this.msg = msg;
            this.data = data;
        }

        /**
         * 错误码
         */
        private Integer errorCode;

        /**
         * 消息提示
         */
        private String msg;

        /**
         * 返回的函数，一般使用Object或者Map
         */
        private Object data;
		
		public Integer getErrorCode() {
            return errorCode;
        }

        public void setErrorCode(Integer errorCode) {
            this.errorCode = errorCode;
        }

        public String getMsg() {
            return msg;
        }

        public void setMsg(String msg) {
            this.msg = msg;
        }

        public Object getData() {
            return data;
        }

        public void setData(Object data) {
            this.data = data;
        }
		
    }

}

2.前面的主题给大家分享一下

{
  "theme": [     //工具栏主题
    "default","dark"
  ],
  "previewTheme": [//预览主题
    "default","dark"
  ],
  "editorTheme": [//编辑主题
    "ambiance",
    "eclipse",
    "mdn-like",
    "mbo",
    "monokai",
    "neat",
    "pastel-on-dark",
    "default",
    "3024-day",
    "3024-night",
    "ambiance",
    "ambiance-mobile",
    "base16-dark",
    "base16-light",
    "blackboard",
    "cobalt",
    "eclipse",
    "elegant",
    "erlang-dark",
    "lesser-dark",
    "mbo",
    "mdn-like",
    "midnight",
    "monokai",
    "neat",
    "neo",
    "night",
    "paraiso-dark",
    "paraiso-light",
    "pastel-on-dark",
    "rubyblue",
    "solarized",
    "the-matrix",
    "tomorrow-night-eighties",
    "twilight",
    "vibrant-ink",
    "xq-dark",
    "xq-light"
  ]
}

5.结束

简单使用就这样子，里面好多可以很灵活的处理，spring的就写的很简单，有兴趣请留言，
转发请注明出处，此文章为原创谢谢！

平原人

发布了42 篇原创文章 · 获赞 13 · 访问量 8331

私信关注

springboot2.1集成Editor.md