引言
写文章插入图片的时候,想着在插入的时候,顺带把文章的描述写进去
但是插入的时候没法进行编辑,只有插入进编辑器里之后才能修改
如果可以在插入的输入框内直接可以修改
就像下面这个一样,就很舒服了。
具体实现
首先找到这个文件:
博客根目录\usr\plugins\Handsome\assets\js\origin\editor-js.php
做下面的修改
1. 增加图片描述输入框
找到其中的表单项部分,关键词是:imagedialog
我是通过全局搜索关键词“请输入图片描述”找到这部分代码的
如果开发其他部分的代码,可以自行查找
这里的returnDialogInputItem
函数可以暂时不用去具体理解是啥
简单理解为生成表单结构就行。
我们给这个表单项复制一个,上下都行。
内容为:
returnDialogInputItem("", "IMAGE_DESC", "请输入图片描述", "图片描述"),
这里的IMAGE_DESC
就是图片描述的“变量”名
——相当于定义了一个变量,从用户输入获取值
然后在底下有个ret
项,需要输出我们上面定义的这个变量。
那么需要输出成这个样子:
"ret": ""
所以最终的效果应该是这样。
PS:如果你做完不出效果,或者插入之后图片没变化的话
注意对比我上面两张图的差异
你输出的md
结果是:

2. 设置图片描述的默认值为文件名
除了设置输入框以外,我们有的时候,上传的文件名其实就是我们的图片描述了,那怎么处理呢?
就需要给它设置默认值!
我们找到下面大概969
行的代码
这里是用来设置原先表单的图片链接默认值的,这里的[0]
代表是第一项(原先也只有一项,所以这么写没毛病)
把值设置成上面函数传进来的url
参数
恰巧我们看到上面给我们传进来的形参里有个file
本来我想打印确认一下的,但死活无法console.log,所以就直接输出了,发现也可以
那么就把这个变量进行正则替换,把后缀去掉,然后作为第一个的值(因为我这里第一个是图片描述)
第二个的值仍然是原先的图片地址
options.strings.imagedialog.input[0].value = file.replace(/\.[^.]+$/, "");
options.strings.imagedialog.input[1].value = url;
就像这样改动
就可以了!
瑞思拜,下班