[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,在合适位置增加如下函数
/* 已测 √ */
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

版权声明:
作者:TDP-苏苏
链接:https://jkboy.com/archives/15823.html
来源:随风的博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
[Typecho小试牛刀]给Joe编辑器增加热键
笔者博客目前使用的Typecho,主题使用的Joe。 前面已经写过两篇相关的文章: [Typecho小试牛刀]Joe主题增加验证码(非插件方式) [Typecho小试牛刀]Joe主题增……
<<上一篇
下一篇>>