引言

我在编写博客的时候,经常有一个编程的习惯。

Ctrl + S组合键保存

经历过一回电脑硬盘爆掉之后,看谁都是刁民,哪台电脑都不放心,写一点,写一点就要保存。

但偏偏Typecho这款博客网站软件,并没有天然支持这种方式保存的,另外去插件那边找吧,也嫌麻烦。

刚巧自己确实会一点点前端知识,干脆自己写一下算了。

实现

1. 找到“保存草稿”按钮

首先根据文章编辑页面的链接地址,找到目录的文件。

文章修改页面的地址

很明显,这里是博客的根目录下的/admin文件夹,找到这个write-post.php文件。

确定有这个文件之后,执行命令查看这个文件信息:

vim ./admin/write-post.php

/admin/write-post.php文件内容

在其中进行查找。

保存草稿按钮

最终在64-65行找到保存草稿的按钮

抓重点,type="submit"代表按钮点击后就会整个表单提交

2. 查找对应的保存功能相关的Js代码

要想增加功能,肯定要先找到保存这个按钮的实际功能

我们可以用id="btn-save"这个特点来查找js相关代码

但这个单词(btn-save)只在这个文件出现了一次(仅有定义),初步怀疑是放到了外部js文件里。

如果不是,那就是整个表单一块提交上去了。

文章编辑的js相关文件

文章编辑页面最下面有一行include 'write-js.php';

代表外部引用了一个文件,看起来有点像是js代码的存放位置。

打开这个文件,我们可以在158 行看到有这个#btn-save选择器的字样

查看write-js.php文件内容

这里做了两次移除属性的操作,然后拿到JQuery构造的DOM对象信息作为变量。

那我们再去搜索btnSave变量,可以看到下面333行有用这个按钮注册点击事件的

请输入图片描述

3. 增加按键监听代码

我们在下面增加几行代码:

// Ctrl+S时调起保存
document.onkeydown = function () {
    // 过滤非组合键监听
    if (window.event.ctrlKey && window.event.keyCode == 83) {
        event.keyCode = 0;
        event.returnValue = false;

        // 模拟点击
        btnSave.click();
    }
}

这里是在整个document里注册一个监听onkeydown事件

而且做了判断,只要监测到按下Ctrl键,并且键码检测到83,也就是S键,就执行模拟点击这个保存按钮

同时需要把当前的键码清除掉,避免后续键盘事件产生影响。

然后保存,wq!退出

测试

刷新文章编辑页面测试,发现已经确实可以使用快捷键Ctrl + S保存了。

搞定收工~

瑞思拜~

欢迎关注拓行公众号,分享各种技术博客文章

拓行——奋勇进取,开拓未来,砥砺前行

最后修改:2023 年 12 月 22 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~