zblogphp如何用主题在后台文章编辑页面添加图片上传按钮

这个功能我在很多的网站上都使用过，包括现在使用的wordpress网站和前段时间自己折腾的thinkphp网站都使用了这个功能。

使用第三方api直接把图片传到我的FTP空间，或者OSS存储桶中。

使用的也还是 lskypro 这个1.6 版本的，不是最新的版本。

本站之前也发布了类似的代码，经过两三年的使用，现在我第三方的图床里面已经有三四千张的图片。

这些图片全部都是和所有的网站分离的，只要FTP空间不关闭，这些图片就跟随着网站的数据走。

今天说一说zblog怎么在后台添加这个功能。

我们要先找到zblog 的模板文件夹，这个功能我是写在模板里面的，同时在模板里面添加一个开关，总体能管理。

挂钩子：

首先，我要在网站模板中的 include.php 文件中挂一个钩子，按照官方的要求挂载就行。

	// 	自己添加的
	if($zbp->Config('justblog')->tuchuangoff){
	    Add_Filter_Plugin('Filter_Plugin_Edit_Response4','justblog_3upload');
	}

完整代码：

下面是我的所有方法，有需要的可以参考一下。

// 插入图片api
function justblog_3upload() {
    global $zbp,$article;
    
    // html 和 css
	echo '<span><style>#up_to_chevereto {display: none!important;}#up_img_label {color:#fff!important;background-color: #16a085!important;border-radius: 5px!important;padding: 7px!important;height: 35px;width: 70px;}</style>
                    <input id="up_to_chevereto" class="ssss" type="file" accept="image/*" multiple="multiple"/><label for="up_to_chevereto" id="up_img_label"><i class="fa fa-picture-o" aria-hidden="true"></i> 上传到图床</label>
                    </span>';


    echo '
    <script>
     	$(".ssss").change(function() {
             			for(var i = 0; i < this.files.length; i++) {
 						var f = this.files[i];
 						var formData = new FormData();
 						formData.append("file", f);
 						formData.append("token", "'.$zbp->Config('justblog')->lankongyoken.'");
 						var res;
 						$.ajax({
 							async: true,
 							crossDomain: true,
 							url: "'.$zbp->Config('justblog')->dsf_api.'",
 							type: "POST",
 							processData: false,
 							contentType: false,
 							data: formData,
';
echo <<<AKK

 							beforeSend: function(xhr) {
 								$('#up_img_label')
 									.html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
 							},
 							success: function(res) {
 								$("#up_img_label")
 									.html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功，继续上传');
 								var foxxx = document.getElementById("zopo").value;
 								var value = '<a href="'+res.data.url+'"><img class="aligncenter" src="'+res.data.url+'" alt="'+foxxx+'"></a>';
 								UE.getEditor('a54165f').execCommand('insertHtml', value);
 							},
 							error: function() {
 								$("#up_img_label")
 									.html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
 							}
AKK;

echo '
 						});
       
 					}
        });
    </script>';
}

需要注意的是有一个CSF问题，我今天花了点时间，到最后也没搞清楚是什么原因。