Editor.md的安裝使用(MarkDown)

時間 2019-11-10

標籤 editor.md editor 安裝使用 markdown 欄目 Markdown 简体版

原文原文鏈接

一、官網下載：http://pandao.github.io/editor.md/javascript

二、使用例子：css

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>添加編輯廣告圖</title>
    <link rel="stylesheet" type="text/css" href="../../css/editormd.css">

    <script type="text/javascript" src="../../js/editormd.min.js"></script>
<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>

</body>
</html>

$(function() {
    editormd("test-editormd", {
        width : "90%",
        height : 640,
        syncScrolling : "single",
        //你的lib目錄的路徑，
        path    : "../../../statics/lib/",
        //這個配置在simple.html中並無，可是爲了可以提交表單，使用這個配置能夠讓構造出來的HTML代碼直接在第二個隱藏的textarea域中，方便post提交表單。
        saveHTMLToTextarea : true,
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/upload/image",
    });
});

java 上傳後臺代碼：html

package com.bbkj.admin.upload.controller;

import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;

/**
 * Created by Administrator on 2016/12/23.
 */
@Controller
@RequestMapping("/upload")
public class UploadController {
    @RequestMapping(value="/image",method= RequestMethod.POST)
    public void hello(HttpServletRequest request, HttpServletResponse response,
                      @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach) {
        try {
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            String rootPath = request.getSession().getServletContext().getRealPath("/upload/editor/");

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

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

            //下面response返回的json格式是editor.md所限制的，規範輸出就OK
            response.getWriter().write("{\"success\": 1, \"message\":\"上傳成功\",\"url\":\"/upload/editor/" + attach.getOriginalFilename() + "\"}");
        } catch (Exception e) {
            try {
                response.getWriter().write("{\"success\":0}");
            } catch (IOException e1) {
                e1.printStackTrace();
            }
        }
    }
}

最後效果：java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。