一个社区，一个博客少不了一个好的编辑器、而作为程序猿自然少不了 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返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是：你买课，我返现。让你花更少的钱，就可以买到课程。

https://geekfl.com

https://geek.laravelcode.cn

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系，但须注明出处，注明文章来源 SimpleMDE Markdown Edito 编辑器的使用

联系我