Editormd的使用——在線編輯和查看文章

使用Editormd可以方便地在界面上嵌入markdown編輯器，並能夠實時預覽。
先看一下實現效果：
編輯文章界面：
展示文章界面：

用法：

首先，到https://pandao.github.io/editor.md/下載Editormd的壓縮包，解壓到自己的靜態資源文件夾下。
第二步，引入必要的文件：

	<link rel="stylesheet" href="/resource/assets/editormd/css/editormd.css"/>
    <link rel="stylesheet" href="/resource/assets/editormd/css/editormd.min.css"/>
    <script src="/resource/assets/js/jquery.min.js"></script>
    <script src="/resource/assets/editormd/editormd.min.js"></script>

注意：jquery文件必須要在editormd之前引入，否則會報editormd is undefined/zepto is undefined的錯誤

第三步，在html中添加如下代碼：

<div id="my-editormd">
	<!-- 書寫與實時顯示的textarea -->
	<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"><%=content%></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>

JavaScript代碼如下所示：

 var editor;
    $(function() {
        editor = editormd("my-editormd", {//注意1：這裏的就是上面的DIV的id屬性值
            width   : "96%",
            height  : 600,
            syncScrolling : "single",
            path    : "/resource/assets/editormd/lib/",//注意2：你的路徑
            saveHTMLToTextarea : true,//注意3：這個配置，方便post提交表單
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的圖片上傳的格式
            imageUploadURL : "/admin/uploadFile" //你的controller裏爲上傳圖片所設計的路徑
        });
    });
// 通過editor.getMarkdown()可以獲取到你所寫的文章內容。可以使用encodeURIComponent()方法將文章內容編碼後存儲。
// 編碼後的內容可以在後端調用URLDecoder.decode(content, "UTF-8")來解碼
// var blogContent = encodeURIComponent(editor.getMarkdown())
// article.content = blogConent;
...

詳細代碼可以看https://github.com/FuGaZn/SpringBlog/blob/master/src/main/webapp/WEB-INF/views/admin/editArticle.jsp
實現圖片上傳功能的Controller下方法如下所示：

	@RequestMapping(value = "/admin/uploadFile", method = RequestMethod.POST)
    @ResponseBody
    public String uploadFile(HttpServletRequest request, HttpServletResponse response,
                                 @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){
        JSONObject jsonObject=new JSONObject();

        try {
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            String rootPath = request.getSession().getServletContext().getRealPath("/resource/img");

            System.out.println("editormd上傳圖片："+rootPath);

            /**
             * 文件路徑不存在則需要創建文件路徑
             */
            File filePath = new File(rootPath);
            if (!filePath.exists()) {
                filePath.mkdirs();
            }

            // 最終文件名
            File realFile = new File(rootPath + File.separator + attach.getOriginalFilename());
            Files.copy(attach.getInputStream(),realFile.toPath());
            //FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile);

            // 下面response返回的json格式是editor.md所限制的，規範輸出就OK
            jsonObject.put("success", 1);
            jsonObject.put("message", "上傳成功");
            jsonObject.put("url", "/resource/img/"+attach.getOriginalFilename());
        } catch (Exception e) {
            jsonObject.put("success", 0);
        }
        return jsonObject.toString();
    }

注意：SpringMVC項目需要在配置文件或配置類中引入對MultipartFile的支持
java配置類的寫法：

    @Bean(name = "multipartResolver") // bean必須寫name屬性且必須爲multipartResolver
    protected CommonsMultipartResolver multipartResolver() {
        CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
        commonsMultipartResolver.setMaxUploadSize(5 * 1024 * 1024);
        commonsMultipartResolver.setMaxInMemorySize(0);
        commonsMultipartResolver.setDefaultEncoding("UTF-8");
        return commonsMultipartResolver;
    }

上面步驟完成後，就可以在頁面中在線編輯文件並上傳圖片了。
接下來讓我們看看如何把數據庫編碼後的md內容轉換成html顯示在頁面上。
首先引入以下文件：

	<link rel="stylesheet" href="/resource/assets/editormd/css/editormd.min.css"/>
    <link rel="stylesheet" href="/resource/assets/editormd/css/editormd.css"/>
    <script src="/resource/assets/js/jquery.min.js"></script>
    <script src="/resource/assets/editormd/editormd.min.js"></script>

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

在html中添加如下內容：

<div id="test-editormd" style="width: 90%;padding-left: 5%" >
	<textarea style="display: none" name="test-editormd-markdown-doc"><%=content%></textarea>
</div>

在JavaScript中引入如下內容：

	var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("test-editormd", {
            htmlDecode :"style, script, iframe",
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默認不解析
            flowChart       : true,  // 默認不解析
            sequenceDiagram : true,  // 默認不解析
        });
    })

然後皆可以看到轉換爲html後的文章內容啦