集成Markdown编辑器 SimpleMDE

avatar 2019年01月11日16:03:58 8 6849 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
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

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

  

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

    655558555555啊

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

    可以，我去体验一下