集成Markdown编辑器 SimpleMDE

目前接触的富文本编辑器很多,最喜欢的是 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())
 

发表评论

目前评论:10

  • avatar java小白菜

  • avatar 小咸鱼2333

    牛逼

  • avatar 刘强东

    小伙子很好很优秀,来京东做我兄弟吧!

  • avatar 言曌 作者

    111

  • avatar 言曌 作者

    222

  • avatar 马云

    111

  • avatar 言曌 作者

    1111

  • avatar 马云

    11112

    • avatar 马云

      @马云 333

  • avatar 马云

    111