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

笔者博客目前使用的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，在合适位置增加如下函数

代码语言：javascript复制

/* 已测 √ */
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目录，执行命令安装依赖(我已安装过，就不展示截图了)

代码语言：shell复制

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

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

代码语言：shell复制

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

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

代码语言：javascript复制

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

打包 php javascript cdnTypecho Joe 热键 js增加热键

0 人点赞