[Typecho小试牛刀]给Joe编辑器增加热键

原创

TDP-苏苏

修改于 2022-06-01 01:45:45

3.7K00

代码可运行

文章被收录于专栏：上云实践笔记上云实践笔记

运行总次数：0

代码可运行

笔者博客目前使用的Typecho，主题使用的Joe。前面已经写过两篇相关的文章： [Typecho小试牛刀]Joe主题增加验证码（非插件方式） [Typecho小试牛刀]Joe主题增加文章目录（非插件方式）本文是第三篇，折腾的对象是编辑器。 Joe主题自带编辑器，界面美观，功能也很强大，美中不足是没有热键功能。下面就跟大家分享一下，如何给Joe编辑器增加热键。

预设背景

本文假设目录结构如下
Typecho安装在/www/nongxue.top目录下
Joe主题文件位于/www/nongxue.top/usr/theme/Joe目录下

第一步：增加热键初始化函数

进入Joe主题目录下的typecho/write/js，打开index.js，在合适位置增加如下函数

/* 已测 √ */
init_HotKey(){
	document.querySelector('.cm-content').onkeydown =function(e){
		e = e || window.event;
		if(e.ctrlKey && e.altKey){
			e.preventDefault();
			let title = '';
			switch(e.keyCode){
				case 66://B 按键键码
					title='加粗';//按键功能 即编辑器按钮悬停提示
				break;
				case 67://C
					title='行内代码';
				break;
				case 68://D
					title='删除';
				break;
				case 69://E
					title='图片表情';
				break;
				case 70://F
					title='全屏/取消全屏';
				break;
				case 72://H
					title='回复可见';
				break;
				case 73://I
					title='倾斜';
				break;
				case 80://P
					title='发布文章';
				break;
				case 83://S
					title='保存草稿';
				break;
				case 86://V
					title='预览/取消预览';
				break;
			}
			if(title){
				$('.cm-tools-item[title="'+title+'"]').click();
			}
		}
	}
}

备注

上面的示例是Ctrl+Alt+热键的组合方式，比如Ctrl+Alt+D是增加删除线
case后面的数值为按键键码，可以参考文末键码对应表。
title为按键功能，即编辑器按钮悬停提示文字，可以根据自己需求修改

第二步：初始化时加载热键初始化函数

在index.js搜索this.init_AutoSave();，定位到该行
在它下面增加this.init_HotKey();，如下图所示

第三步：编译、上传

如果之前没有编译过，需要安装node依赖
打开命令行窗口，进入typecho/write目录，执行命令安装依赖(我已安装过，就不展示截图了)

cd /www/nongxue.top/usr/theme/Joe/typecho/write
npm install

安装依赖后，执行下面的命令即可编译

npm run serve

created dist/index.bundle.js in **s即表示编译完成
如果你是本地编译，将typecho/write/js/dist下的index.bundle.js上传到你的服务器，覆盖之前的文件，就OK了！
此时，编辑器已支持自定义的热键，如不生效建议在编辑页面刷新(如启动了CDN，需在CDN删除缓存)

附录：按键-键码对照表

按键	键码	按键	键码	按键	键码
A	65	K	75	U	85
B	66	L	76	V	86
C	67	M	77	W	87
D	68	N	78	X	88
E	69	O	79	Y	89
F	70	P	80	Z	90
G	71	Q	81	，	188
H	72	R	82	。	190
I	73	S	83	【	219
J	74	T	84	】	221

想获得更多按键的键码，可以将下面的代码粘贴到浏览器控制台，回车，然后鼠标点击网页任意位置，按下键盘按键，控制台就会打印该按键信息

document.onkeydown = function(e){
	e = e || window.event;
	console.log(e);
}

下面是重点关注参数的含义： altKey：是否为Alt ctrlKey：是否为Ctrl key：按键输入的字符 keyCode：键码 shiftKey：是否为Shift metaKey：是否为Windows/Super键

笔者为腾讯云TDP成员，点击加入腾讯云TDP
博文链接：https://nongxue.top/p/daima/95.html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

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

打包

php

javascript

cdn

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

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

登录后参与评论

0 条评论

热度

[Typecho小试牛刀]给Joe编辑器增加热键

[Typecho小试牛刀]给Joe编辑器增加热键

预设背景

第一步：增加热键初始化函数

备注

第二步：初始化时加载热键初始化函数

第三步：编译、上传

附录：按键-键码对照表

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

按键	键码	按键	键码	按键	键码
A	65	K	75	U	85
B	66	L	76	V	86
C	67	M	77	W	87
D	68	N	78	X	88
E	69	O	79	Y	89
F	70	P	80	Z	90
G	71	Q	81	，	188
H	72	R	82	。	190
I	73	S	83	【	219
J	74	T	84	】	221

按键	键码	按键	键码	按键	键码
A	65	K	75	U	85
B	66	L	76	V	86
C	67	M	77	W	87
D	68	N	78	X	88
E	69	O	79	Y	89
F	70	P	80	Z	90
G	71	Q	81	，	188
H	72	R	82	。	190
I	73	S	83	【	219
J	74	T	84	】	221

按键	键码	按键	键码	按键	键码
A	65	K	75	U	85
B	66	L	76	V	86
C	67	M	77	W	87
D	68	N	78	X	88
E	69	O	79	Y	89
F	70	P	80	Z	90
G	71	Q	81	，	188
H	72	R	82	。	190
I	73	S	83	【	219
J	74	T	84	】	221