008_在自己的网站中使用MarkDown【editor.md】（Java）

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

使用MarkDown进行编辑

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

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

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.运行

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);    }

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

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

2.准备一个md文件：

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.运行

说明

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

源码下载

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

​

欢迎加入交流群：451826376

更多信息：www.itcourse.top