TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
editormd,markdown 自定义导航栏按钮
7995
人阅读
2020/1/9 10:11
总访问:
3922272
评论:
0
收藏:
0
手机
分类:
编辑器
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)
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}