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

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

安装

npm install simplemde --save

使用

页面中引入 simplemde.min.csssimplemde.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

下篇说下如何上传图片,复制黏贴 直接拖拽进行上传

版权许可

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

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

联系我

编程怪事
暂无回复
0 / 180