Editor.md 的简单使用

Editor.md 的使用

1. 从官网下载相应的组件

editorMd.PNG

2. 在页面中使用

<div id="my-editormd">
            <textarea class="editormd-markdown-textarea" name="doc"
                      style="display:none;"></textarea>
            <!-- 第二个隐藏文本域,用来构造生成的HTML代码,方便表单POST提交,这里的name可以任意取,后台接受时以这个name键为准 -->
            <textarea class="editormd-html-textarea" name="html"></textarea>
</div>


<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("my-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "../lib/",
           //这个配置在simple.html中并没有,但是为了能够提交表单,使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中,方便post提交表单。
            saveHTMLToTextarea: true,

            imageUpload: true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/uploadImage",//注意你后端的上传图片服务地址
            onload: function(){
                this.width("100%");
                this.height(480);
            }
        });
    });
</script>

var content = $('.editormd-markdown-textarea').val(); 获取值
  • 后端接受图片
    //发布项目后改为项目地址
    private static String UPLOADED_FOLDER = "F:\\ideaTest\\gakki\\src\\main\\webapp\\image\\";

    @RequestMapping("/uploadimg")
    public Map<String, Object> editormdPic(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) throws Exception {
        Map<String, Object> resultMap = new HashMap<>();
        String fileName = file.getOriginalFilename();// 获取文件名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));// 获取文件的后缀
        String newFileName = DateUtil.getCurrentDateStr() + suffixName;
        try {
            FileUtils.copyInputStreamToFile(file.getInputStream(),
                    new File(UPLOADED_FOLDER + newFileName));
            resultMap.put("success", 1);
            resultMap.put("message", "上传成功!");
            resultMap.put("url", "http://localhost:8888/image/" + newFileName);
        } catch (Exception e) {
            resultMap.put("success", 0);
            resultMap.put("message", "上传失败!");
            e.printStackTrace();
        }

        return resultMap;
    }

前段显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>md</title>
    <link rel="stylesheet" href="editormd.preview.css" />
    <script src="/static/jquery.min.js"></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>
    <script src="editormd.min.js"></script>
</head>
<body>
<div id="doc-content">
    <textarea style="display:none;" placeholder="markdown语言">${md.content }</textarea>
</div>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });});
</script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,860评论 25 708
  • 描述 给定一个已经按升序排列的数组,找到两个数使他们加起来的和等于特定数。函数应该返回这两个数的下标,index1...
    6默默Welsh阅读 250评论 0 0
  • 今夜看书,看到其中一段文字,突然想起一个人,她是我刚上初中时候的同学,因为姓赵的原因,我们就称呼她为z吧。我那时候...
    窦一豆阅读 240评论 0 0
  • 曾国藩的穷根究底与恒。 这是自己第一次读曾国藩:《曾国藩的正面与侧面》。 他是一个知道自己笨拙的人,却不断在精神上...
    陳苗阅读 729评论 0 1
  • 邓丽君,我心永恒 原创2017-12-11麒麟才子今夜无烦忧 邓丽君是我永恒的情人,这是多少男子永恒的心声,却不怕...
    麒麟才子长江南阅读 650评论 0 2