SimpleMDE Markdown Edito 编辑器的使用

• 2019 年 12 月 17 日
• 筆記

SimpleMDE Markdown Edito 编辑器的 使用

一个社区，一个博客少不了一个好的编辑器、而作为程序猿自然少不了 Markdown 编辑器。 其实写这篇就是记录下自己引入的轮子，以免那天需要还得找一圈。

simplemde-markdown-editor 我觉得是一个非常好用的 Markdown 编辑器 ，这里可查看 Demo 效果

安装

npm install simplemde --save

使用

页面中引入 simplemde.min.css 和 simplemde.min.js 或者使用 CDN

创建一个文本域 textarea

<textarea name="body" class="form-control" id="MyID"></textarea>

JavaScript方式调用

<script>  var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });

或者jQuery方式

<script>  var simplemde = new SimpleMDE({ element: $("#MyID")[0] });  </script>

自定义配置

toobar 自定义

// Customize only the order of existing buttons  var simplemde = new SimpleMDE({      toolbar: ["bold", "italic", "heading", "|", "quote"],  });    // Customize all information and/or add your own icons  var simplemde = new SimpleMDE({      toolbar: [{              name: "bold",              action: SimpleMDE.toggleBold,              className: "fa fa-bold",              title: "Bold",          },          {              name: "custom",              action: function customFunction(editor){                  // Add your own code              },              className: "fa fa-star",              title: "Custom Button",          },          "|", // Separator          ...      ],  });