editormd,markdown 自定义导航栏按钮 电脑版发表于:2020/1/9 10:11 editormd,markdown 自定义导航栏按钮可以通过修改源代码来实现,但是没有必要那么麻烦。 editormd本身就有增加自定义按钮的扩展 官网:https://github.com/pandao/editor.md/ 官网案例:https://github.com/pandao/editor.md/blob/master/examples/custom-toolbar.html ![](https://img.tnblog.net/arcimg/aojiancc2/eb151a6d782e4c14a9c8ce167d61d927.png) **第一步**:在toolbarIcons配置需要增加的工具栏按钮标识 ![](https://img.tnblog.net/arcimg/aojiancc2/fa858e5f692f4334ba3767435c8e8701.png) **第二步**:在toolbarIconTexts中配置,菜单栏显示的文字 ![](https://img.tnblog.net/arcimg/aojiancc2/61747ee458134dc0b8e9d3e070a69aa7.png) 如果不需要图标,直接这样就可以了,效果如下: ![](https://img.tnblog.net/arcimg/aojiancc2/11680fbfb84a49dba9d2bfd749a331bf.png) 如果需要图标在toolbarIconsClass中去配置即可 ![](https://img.tnblog.net/arcimg/aojiancc2/72f3e68b7d0941c79fab7b77ecfa314f.png) **第三步**:在lang中配置,菜单栏按钮鼠标放上去显示的文字详情描述 ![](https://img.tnblog.net/arcimg/aojiancc2/a89f0832705d415ab4d477145b0f10f5.png) 效果如下: ![](https://img.tnblog.net/arcimg/aojiancc2/0feb2d24fb8744adb327f22e215ef01b.png) **第四步**:在toolbarHandlers中去添加事件处理 ```javascript // 自定义工具栏按钮的事件处理 toolbarHandlers: { customIcon: function () { // 读取缓存内容 markdownEditor.CodeAutoSaveGetCache(); }, tnblog_save: function (cm, icon, cursor, selection) { alert("点击直接存储文章"); } }, ``` **第五步**:如何需要配合自己编写的插件可以在onload中使用editormd.loadPlugin引入插件 ![](https://img.tnblog.net/arcimg/aojiancc2/d1e812d5b816459fa2013bca5c9acb6b.png)