集成Markdown编辑器 SimpleMDE

avatar 2019年01月11日16:03:58 8 6488 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())









  • 微信
  • 交流学习,服务定制
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

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

发表评论

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

  

已通过评论:2   待审核评论数:0
  1. avatar 阿萨

    655558555555啊

  2. avatar 冬日暖阳

    可以,我去体验一下