Editor.md 的简单使用

[复制链接]
查看: 424|回复: 0

8

主题

8

帖子

36

积分

新手上路

Rank: 1

积分
36
发表于 2020-12-29 11:47:58 | 显示全部楼层 |阅读模式
Editor.md 的使用1.
从官网下载相应的组件



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


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

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

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

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

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

    20.         return resultMap;
    21.     }
    复制代码
    前段显示
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>md</title>
    6.     <link rel="stylesheet" href="editormd.preview.css" />
    7.     <script src="/static/jquery.min.js"></script>
    8.     <script src="/lib/marked.min.js"></script>
    9.     <script src="/lib/prettify.min.js"></script>
    10.     <script src="/lib/raphael.min.js"></script>
    11.     <script src="/lib/underscore.min.js"></script>
    12.     <script src="/lib/sequence-diagram.min.js"></script>
    13.     <script src="/lib/flowchart.min.js"></script>
    14.     <script src="/lib/jquery.flowchart.min.js"></script>
    15.     <script src="editormd.min.js"></script>
    16. </head>
    17. <body>
    18. <div id="doc-content">
    19.     <textarea style="display:none;" placeholder="markdown语言">${md.content }</textarea>
    20. </div>

    21. <script type="text/javascript">
    22.     var testEditor;
    23.     $(function () {
    24.         testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
    25.             htmlDecode: "style,script,iframe",
    26.             emoji: true,
    27.             taskList: true,
    28.             tocm: true,
    29.             tex: true, // 默认不解析
    30.             flowChart: true, // 默认不解析
    31.             sequenceDiagram: true, // 默认不解析
    32.             codeFold: true
    33.         });});
    34. </script>
    35. </body>
    36. </html>
    复制代码







腾讯云
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文



在线客服(工作时间:9:00-22:00)
400-600-6565

内容导航

微信客服

Copyright   ©2015-2019  云服务器社区  Powered by©Discuz!  技术支持:尊托网络     ( 湘ICP备15009499号-1 )