引言

记得之前我写过一篇文章，通过修改源码的方式来让文章页面使用Ctrl + S的方式保存草稿

之前没觉得有什么问题，但是突然发现，如果typecho博客程序进行升级了

那我这个代码就会丢失，所以我想着还是写成一个插件的形式，不会跟随typecho博客程序进行升级

逻辑分析

首先，我那篇文章里的核心方式，就是构造一个按键监听，监听Ctrl + S键盘按下

然后调用原本的“保存草稿”按钮，进行保存。

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

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

相当的简单。

所以我这个插件的核心，也是这个逻辑。

我通过插件向这个write-js.php文件，注入一段js代码，然后就可以实现

而不需要去修改原本的write-js.php文件了！

我这里直接使用了博客程序带的一个示例插件来补充编写

当然，以后有机会的话，可以把它单独拉出来，做成一个独立插件，但目前暂时就这样吧。

实现步骤

首先，打开了我们的示例插件HelloWorld，其中的Plugin.php文件。

分为三步，

1. 一个是激活插件时，需要注入的指定处理函数
2. 第二个是配置面板，可设置需要的键码
3. 第三个才是具体需要注入的Js代码

激活插件

在我们的activate方法中，补充一行：

\Typecho\Plugin::factory('admin/write-js.php')->write = __CLASS__ . '::contentWriteJs';

具体含义是用当前类当中的contentWriteJs方法（自己定义的函数名）的输出

来注入到write-js.php文件顶部的位置

至于为什么要写成这个样子呢？是因为我们write-js.php文件当中顶部，有一个留给我们注入的口子。

如果没有这个口子，那我们插件是无法进行注入的。

配置插件的键码

这里我写了个输入框，来简单接收（配置）组合按键的键码

这种写法目前只支持Ctrl + 一个键

这个键只支持输入键码keyCode

在我们的config方法内，进行配置：

/** 保存的快捷键码 */
$saveKeyCode = new Text('saveKeyCode', null, '83', _t('新增或编辑文章时保存的快捷键码，先按Ctrl'));

$form->addInput($saveKeyCode);

这样用户就可以自己输入键码，去选择要组合的按键了。

注入需要的JS代码

我们来实现最后一个环节，contentWriteJs函数

我这里构建了一个<script></script>标签，内部放了js的代码

$saveKeyCode = Options::alloc()->plugin('HelloWorld')->saveKeyCode;

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

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

echo '<script type="text/javascript">';
echo '$(document).ready(function() {';
echo 'let btnSave = $("#btn-save");';
echo $jsCode;
echo '});';
echo '</script>';

其中的第一行，$saveKeyCode是通过Typecho提供给我们的函数获取到当前类的一个存储值

就是上面第二步配置的键码值（默认为83）

然后通过php输出一些js代码，我下面给出js代码的原文：

<script type="text/javascript">
    $(document).ready(function() {
        let btnSave = $("#btn-save");
        // Ctrl+S时调起保存
        document.onkeydown = function () {
            // 过滤非组合键监听
            if (window.event.ctrlKey && window.event.keyCode == {$saveKeyCode}) {
                event.keyCode = 0;
                event.returnValue = false;

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

搞定！瑞思拜~