在自己的网站中使用MarkDown（Java）

• editor.md是国内开源的一款在线Markdown编辑器，单纯基于前端JavaScript实现，和后端什么语言无关。

使用MarkDown进行编辑

1. 下载editor.md资源文件：

微信公众号：JavaWeb架构师

2. 选取自己需要的文件到自己的项目中，这里选取：
   |- editormd.css文件
   |- editormd.js文件
   |- jquery.min.js文件
   |- lib文件夹
   |- images文件夹
   |- fonts文件夹

微信公众号：JavaWeb架构师

3.引用css和js文件(jquery.min.js文件要在editormd.js之前引用)：

        <link rel="stylesheet" type="text/css" href="css/editormd.css"/>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/editormd.js" type="text/javascript" charset="utf-8"></script>

4.添加HTML元素结构：

        <!-- MarkDown的id标志 -->
        <div id="my-editormd">
            <!-- 书写与实时显示的textarea -->
            <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
            <!-- 用于后端获取md稳当内容，Java中：request.getParameter("my-editormd-html-code")。  -->
            <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
        </div>

5.添加js代码：

        <script type="text/javascript">
            $(function() {
                editormd("my-editormd", { //注意1：这里的就是上面的DIV的id属性值
                    width: "90%",
                    height: 640,
                    syncScrolling: "single",
                    path: "lib/", //注意2：你的路径
                    saveHTMLToTextarea: true //注意3：这个配置，方便post提交表单
                    
                });
            });
        </script>

6.运行

微信公众号：JavaWeb架构师

7.在后端接收md文档内容：

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String parameter = request.getParameter("my-editormd-html-code");
        System.out.println("md: " + parameter);
    }

微信公众号：JavaWeb架构师

将MarkDown内容解析到HTML页面显示

1. 选取自己需要的文件到自己的项目中，这里选取：
   |- editormd.css文件
   |- editormd.js文件
   |- jquery.min.js文件
   |- lib文件夹
   |- images文件夹
   |- fonts文件夹

   
   微信公众号：JavaWeb架构师

2.准备一个md文件：

微信公众号：JavaWeb架构师

3.导入相关css和js文件：

        <link rel="stylesheet" type="text/css" href="css/editormd.css" />
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/editormd.js" type="text/javascript" charset="utf-8"></script>

        <script src="lib/marked.min.js"></script>
        <script src="lib/prettify.min.js"></script>
        <script src="lib/raphael.min.js"></script>
        <script src="lib/underscore.min.js"></script>
        <script src="lib/sequence-diagram.min.js"></script>
        <script src="lib/flowchart.min.js"></script>
        <script src="lib/jquery.flowchart.min.js"></script>

4.书写HTML元素

        <div id="wordsView">
            <textarea style="display:none;" name="editormd-markdown-doc" id="mdText">

             </textarea>
        </div>

5.将md语法内容添加在上面的textarea标签体中，并解析：

                // 文章内容
                $.get('articy/MUI/001_跨平台开发_MUI_认识MUI.md').success(function(elem) {
                        $("#mdText").text(elem)
                    // markdown
                    var wordsView;
                        wordsView = editormd.markdownToHTML("wordsView", {
                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
                        emoji           : true,
                        taskList        : true,
                        tex             : true,  // 默认不解析
                        flowChart       : true,  // 默认不解析
                        sequenceDiagram : true,  // 默认不解析
                    });                         
                })

6.运行

微信公众号：JavaWeb架构师

说明

• 上面演示的只是简单的使用，还有更多细节需要大家慢慢去发现。

源码下载

关注下方的微信公众号，回复：MarkDown.code

​

欢迎加入交流群：451826376

更多信息：www.itcourse.top

微信公众号：JavaWeb架构师