本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

为typecho增加Ctrl+S保存文章功能

前言

本文使用jQuery修改typecho让其在文章编辑页内支持CTRL + S保存文章草稿,typecho的版本为1.2 (18.10.23).

为什么需要?

由于个人博客使用的typecho,在编辑文章的过程中经常习惯性的点击CTRl + S,然后就会非常不友好的提示了这个。

2019-10-28T06:59:58.png

这对追求优雅的本宅来说,简直无法容忍。难道我要因此弃用typecho?这也太夸张了。那就来发挥我modify的能力吧,毕竟闲余折腾是我的一大乐趣,而且自己动手,丰衣足食嘛!

心路历程

  1. 首先,我知道这个理论上绝对可行,因为我用过很多此类功能。
  2. 经查阅资料,chrome的适配最好,当然我也没考虑别的浏览器,因为我眼中的浏览器只有两种,chrome和不是chrome。随便一提:不用chrome的程序员不是优雅的程序员。
  3. 分析实现方法,大致分为两步,监听ctrl+s时间和模拟点击保存草稿按钮
  4. 选型方面,由于typecho内置jquery,因此采用最快捷的办法

实现过程

确认页面是否支持jQuery

为了避免重复引入,我们可在console中输入$,根据提示来确认是否已有jQuery

确认是否已有jQuery

如图,则表示已有jQuery。

找到编辑文章的php页面

嗯,就是这个路径typecho/admin/write-post.php

找个合适位置放script

请在文件末尾插入一个script节点,以防止在jquery定义之前使用或者在if语句中未应用。

监听ctrl + S

在script节点中插入以下代码

$(window).keydown(function(event) {
        if (event.ctrlKey && event.which == 83) {
            alert("Ctrl+S pressed.");
            return false;
        } else {
            return true;
        }
    });

刷新编辑文章页,提示以下内容则监听成功。

好像暗黑背景有点看不清?

模拟点击保存

通过源代码分析,我们可以发现,保存文章的按钮id为btn-save。现在我们修改代码里面的内容如下

$(window).keydown(function(event) {
        if (event.ctrlKey && event.which == 83) {
            $("#btn-save").click();
            return false;
        } else {
            return true;
        }
    });

大功告成

2019-10-28T07:33:26.png

结语

本文从技术层面上来说没什么亮点,这是我在尝试一种新的写作方式的练手篇。在原先只记录如何做的基础上,增加了了心路历程这一项,侧重于记录我在实际过程中一个想法到把它实现出来的整个过程,目的在于分享如何思考,从哪里开始,怎么实现的整个思维过程。大家且当抛砖引玉看看吧!

参考资料

JavaScript或jQuery模拟点击超链接和按钮
javascript屏蔽Ctrl+s,F1,F3各浏览器兼容写法

———— 本文结束 感谢阅读 ————

推广

 继续浏览关于 的文章

 本文最后更新于:2019/10/28 15:45:32,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 闲余折腾 > 为typecho增加Ctrl+S保存文章功能