集成Markdown编辑器 SimpleMDE

目前接触的富文本编辑器很多,最喜欢的是 froala富文本编辑器、simditor 富文本编辑器、summernote富文本编辑器这几个。本文介绍一个支持 Markdown 语法的编辑器——SimpleMDE。

官网地址:https://simplemde.com/

效果图如下

集成Markdown编辑器 SimpleMDE

 

下面简单讲下如何集成

一、下载包并引用

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
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar 阿萨

      655558555555啊

      • avatar 冬日暖阳

        可以,我去体验一下