引言

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

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

原先插入图片的样式

原先插入图片的样式

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

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

插入图片时增加图片注释

插入图片时增加图片注释

具体实现

首先找到这个文件:

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

做下面的修改

1. 增加图片描述输入框

找到其中的表单项部分,关键词是:imagedialog

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

js文件当中表单项的输出

js文件当中表单项的输出

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

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

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

内容为:

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

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

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

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

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

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

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

增加插入图片时的表单项及输出结果

增加插入图片时的表单项及输出结果

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

你输出的md结果是:

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

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

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

就需要给它设置默认值!

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

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

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

js文件当中表单项的默认值

js文件当中表单项的默认值

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

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

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

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

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

就像这样改动

设置图片文件的默认文本

设置图片文件的默认文本

就可以了!

瑞思拜,下班


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

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

最后修改:2024 年 12 月 31 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~