一个社区,一个博客少不了一个好的编辑器、而作为程序猿自然少不了 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
...
],
});
更多用法请参考 : simplemde-markdown-editor
下篇说下如何上传图片,复制黏贴 直接拖拽进行上传
关于极客返利
极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。
版权许可
本作品采用 知识共享署名 4.0 国际许可协议 进行许可。转载无需与我联系,但须注明出处,注明文章来源 SimpleMDE Markdown Edito 编辑器的使用