typecho后台文章撰写使用Ctrl+S快捷键储存草稿

### 引言

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

`Ctrl + S`组合键保存

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

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

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

### 实现

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

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

![文章修改页面的地址](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2799260152.png)

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

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

```shell
vim ./admin/write-post.php
```

![/admin/write-post.php文件内容](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/3651634430.png)

在其中进行查找。

![保存草稿按钮](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/3592137762.png)

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

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

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

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

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

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

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

![文章编辑的js相关文件](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2035611341.png)

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

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

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

![查看write-js.php文件内容](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/3837695220.png)

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

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

![请输入图片描述](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/810366123.png)

#### 3. 增加按键监听代码

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

```js
// 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 日

如果您对各种技术博客文章感兴趣，欢迎关注拓行公众号，分享各种专业技术知识~

typecho后台文章撰写使用Ctrl+S快捷键储存草稿

黄炜 • 2023 年 12 月 22 日

typecho后台文章撰写使用Ctrl+S快捷键储存草稿

typecho后台文章撰写的自定义字段默认收起

手把手教你在Linux下源码编译安装phpv8.3.0最新版

手把手教你在Linux下源码搭建MySQL关系型数据库v8.2.0最新社区版

Linux如何上传、下载传输文件或目录

手把手教你源码搭建Nginx服务器v1.25.3最新版（非root启动）

购买自己的Linux服务器

母上大人的饭-241109

推荐一个超好用的贴图截图工具snipaste

山东省-济南市

【广州越秀】威邵鸡煲(总店)

typecho后台文章撰写使用Ctrl+S快捷键储存草稿