原文：editormd.js增加发布按钮、自定义按钮、自定义快捷键超详细教程

最近有在做一个博客网站，在做到写文章功能时用到了国人开发的editor.md在线Markdown编辑工具，功能十分强大，用起来也十分简单，下面是它的下载链接：
http://pandao.github.io/editor.md/
如何使用在此就不多做赘述了，CSDN中有很多相关的文章，今天主要讲一下如何自定义向其中添加按钮以及快捷键
首先我们找到editor.md目录中的editormd.js文件

打开后我们向下找到定义按钮的数组

推荐使用simple面板，按钮不多不少，都是比较常用的，当然你也可以按自己喜欢配置想要使用的按钮
这里我选择的simple面板，并追加了一个publish，用作发布按钮
向下找到editormd.defaults默认配置，在其中的事件配置中追加一个事件

然后找到toolbarIconsClass，定义按钮图标

接着再找到lang，定义按钮名称

做完以上操作，我们在此js文件大概后三分之一的位置找到定义点击事件函数的位置

如上图，向其追加一个函数，执行this.settings.onpublish()，这个就是我们在上一步操作所定义的事件

下面我们在加一个快捷键操作，也是直接在js作者定义的结构体中添加，滚轮向下，很快就能看到

这里我把他之前的快捷键操作改写为之前定义的事件，也可以按自己的想法自己定义快捷键。

以上操作全部完成我们就写一个js调用editor

editormd("test-editormd", {
                width: "100%",
                height: "100%",
                path: "../lib/editor.md/lib/",
                theme: "dark",
                previewTheme: "dark",
                editorTheme: "pastel-on-dark",
                codeFold: true,//折叠代码块
                syncScrolling: 'single',
                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                searchReplace: true,
                watch: true,                // 关闭实时预览
                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
                toolbar: true,             //关闭工具栏
                toolbarAutoFixed: true,    //控制工具栏始终置顶
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji: true,//emoji表情，默认关闭
                taskList: true,
                tocm: true,         // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload: true,//图片上传
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
                    return editormd.toolbarModes['simple']; // full, simple, mini
                },
                onload: function () {
                },
                onpublish: function () {
                    alert("123");
                }
            });

效果如下：

补充一下，有的朋友设置之后没反应的看下引用的js是否是min包，min包需要将修改后的editormd.js压缩并将压缩后的代码粘贴替换到min包就OK了
下面放一个在线压缩js代码的网站：
https://jsmin.51240.com/