集成Markdown编辑器 SimpleMDE

avatar 2019年01月11日16:03:58 8 6222 views
博主分享免费Java教学视频，B站账号：Java刘哥
目前接触的富文本编辑器很多，最喜欢的是 froala富文本编辑器、simditor 富文本编辑器、summernote富文本编辑器这几个。本文介绍一个支持 Markdown 语法的编辑器——SimpleMDE。 官网地址：https://simplemde.com/ 效果图如下   下面简单讲下如何集成

一、下载包并引用

1.下载 官网地址：点此 下载解压后，主要将 simplemde.min.js 和 simplemde.min.css 拿出来放到 static 目录   2.引用 HTML文件引用 CSS
  1. <link rel="stylesheet" href="/static/plugins/simplemde/simplemde.min.css">
JS
  1. <script src="/static/plugins/jquery/jquery.min.js"></script>
  2. <script src="/static/plugins/simplemde/simplemde.min.js"></script>
 

二、具体代码

HTML
  1. <div id="markdown-editor">
  2.      <textarea id="editorarea" style="display:none;"><#if post??>${post.postContent?if_exists}</#if></textarea>
  3. </div>
JS
  1. <script>
  2.     /**
  3.      * 加载编辑器
  4.      */
  5.     var simplemde = new SimpleMDE({
  6.         element: document.getElementById("editorarea"),
  7.         autoDownloadFontAwesome: false,
  8.         autofocus: true,
  9.         autosave: {
  10.             enabled: true,
  11.             uniqueId: "editor-temp-page-<#if post??>${post.postId}<#else>1</#if>",
  12.             delay: 10000
  13.         },
  14.         renderingConfig: {
  15.             codeSyntaxHighlighting: true
  16.         },
  17.         showIcons: ["code", "table"],
  18.         status: true,
  19.         status: ["autosave", "lines", "words"],
  20.         tabSize: 4
  21.     });
  22. </script>
获得编辑器的内容
  1. simplemde.value(),
包含HTML标签的
  1. simplemde.markdown(simplemde.value())
 
历史上的今天
一月
11日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：2   待审核评论数：0
  1. avatar 阿萨
    回复 2019年03月08日 14:20:24

    655558555555啊

  2. avatar 冬日暖阳
    回复 2019年01月17日 11:32:42

    可以，我去体验一下