typecho的hansome插件插入图片时增加一个描述输入框

## 引言

写文章插入图片的时候，想着在插入的时候，顺带把文章的描述写进去

但是插入的时候没法进行编辑，只有插入进编辑器里之后才能修改

![原先插入图片的样式](https://static.hw13.cn/usr/uploads/2024/12/3504203663.png)

如果可以在插入的输入框内直接可以修改

就像下面这个一样，就很舒服了。

![插入图片时增加图片注释](https://static.hw13.cn/usr/uploads/2024/12/741547664.png)

## 具体实现

首先找到这个文件：

`博客根目录\usr\plugins\Handsome\assets\js\origin\editor-js.php`

做下面的修改

### 1. 增加图片描述输入框

找到其中的表单项部分，关键词是：`imagedialog`

> 我是通过全局搜索关键词“请输入图片描述”找到这部分代码的
> 如果开发其他部分的代码，可以自行查找

![js文件当中表单项的输出](https://static.hw13.cn/usr/uploads/2024/12/3193286334.png)

这里的`returnDialogInputItem`函数可以暂时不用去具体理解是啥

简单理解为生成表单结构就行。

我们给这个表单项复制一个，上下都行。

内容为：

```js
returnDialogInputItem("", "IMAGE_DESC", "请输入图片描述", "图片描述"),
```

这里的`IMAGE_DESC`就是图片描述的“变量”名

**——相当于定义了一个变量，从用户输入获取值**

然后在底下有个`ret`项，需要输出我们上面定义的这个变量。

那么需要输出成这个样子：

`"ret": "![IMAGE_DESC](IMAGE_URL)"`

所以最终的效果应该是这样。

![增加插入图片时的表单项及输出结果](https://static.hw13.cn/usr/uploads/2024/12/3343785267.png)

> PS:如果你做完不出效果，或者插入之后图片没变化的话
> 注意对比我上面两张图的差异

你输出的`md`结果是：

```markdown
![你输入的图片描述](你输入的图片地址)
```

### 2. 设置图片描述的默认值为文件名

除了设置输入框以外，我们有的时候，上传的文件名其实就是我们的图片描述了，那怎么处理呢？

就需要给它设置默认值！

我们找到下面大概`969`行的代码

这里是用来设置原先表单的图片链接默认值的，这里的`[0]`代表是第一项（原先也只有一项，所以这么写没毛病）

把值设置成上面函数传进来的`url`参数

![js文件当中表单项的默认值](https://static.hw13.cn/usr/uploads/2024/12/485438438.png)

恰巧我们看到上面给我们传进来的形参里有个`file`

> 本来我想打印确认一下的，但死活无法console.log，所以就直接输出了，发现也可以

那么就把这个变量进行正则替换，把后缀去掉，然后作为第一个的值（因为我这里第一个是图片描述）

第二个的值仍然是原先的图片地址

```js
options.strings.imagedialog.input[0].value = file.replace(/\.[^.]+$/, "");
options.strings.imagedialog.input[1].value = url;
```

就像这样改动

![设置图片文件的默认文本](https://static.hw13.cn/usr/uploads/2024/12/634536073.png)

就可以了！

瑞思拜，下班

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

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

最后修改：2024 年 12 月 31 日

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

typecho的hansome插件插入图片时增加一个描述输入框

黄炜 • 2025 年 01 月 02 日