首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >SimpleMDE Markdown Edito 编辑器的使用

SimpleMDE Markdown Edito 编辑器的使用

作者头像
hedeqiang
发布2019-12-17 20:51:18
发布2019-12-17 20:51:18
1.2K0
举报
文章被收录于专栏:LaravelCodeLaravelCode

SimpleMDE Markdown Edito 编辑器的 使用

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

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

安装

代码语言:javascript
复制
npm install simplemde --save

使用

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

创建一个文本域 textarea

代码语言:javascript
复制
<textarea name="body" class="form-control" id="MyID"></textarea>

JavaScript方式调用

代码语言:javascript
复制
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });

或者jQuery方式

代码语言:javascript
复制
<script>
var simplemde = new SimpleMDE({ element: $("#MyID")[0] });
</script>
自定义配置

toobar 自定义

代码语言:javascript
复制
// 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
        ...
    ],
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • SimpleMDE Markdown Edito 编辑器的 使用
    • 安装
    • 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档