使用Typecho插件的方式实现按键保存草稿页面

博主：黄炜
发布时间：2024 年 12 月 17 日
22 次浏览
2729字数
分类：技术 PHP 脚本 JavaScript

## 引言

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

<div class="inner-content" >
<p class="inser-title">typecho后台文章撰写使用Ctrl+S快捷键储存草稿</p>
<div class="inster-summary text-muted">
引言我在编写博客的时候，经常有一个编程的习惯。Ctrl + S组合键保存经历过一回电脑硬盘爆掉之后，看谁都是刁民，...
</div>
</div>
</a>

</div>

</div>

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

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

## 逻辑分析

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

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

```js
// 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`方法中，补充一行：

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

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

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

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

![允许我们插件注入的“口子”](https://static.hw13.cn/usr/uploads/2024/12/1230733678.png)

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

### 配置插件的键码

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

> 这种写法目前只支持`Ctrl` + 一个键
>
> 这个键只支持输入键码`keyCode`

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

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

$form->addInput($saveKeyCode);
```

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

### 注入需要的JS代码

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

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

```php
$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`代码的原文：

```html
<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>
```

搞定！瑞思拜~

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

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

最后修改：2024 年 12 月 17 日

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