WordPress编辑器中添加“上传到Chevereto图床”按钮

先放一张效果图。

在wordpress中可以直接上传图片至Chevereto图床。

获取API Key

准备一个Chevereto搭建的图床，转到仪表盘-设置-API，将API v1 key记录下来。

搭建Chevereto图床教程。

API后端设置

进入Chevereto的安装目录，将app/routes/route.api.php文件拷贝到app/routes/overrides/route.api.php文件。

修改app/routes/overrides/route.api.php。

允许跨域
打开app/routes/overrides/route.api.php，第二行（<?php后面）添加如下几行

header('Access-Control-Allow-Origin: https://www.moeyao.cn');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, Origin, Accept');

将https://www.moeyao.cn改成自己的域名即可。

特别要注意的是，不能以/结尾，必须删除，不然会导致上传文件失败。

也可以直接改成*，这样就允许所有域名上传。

在app/routes/overrides/route.api.php中，找到

$uploaded_id = CHV\Image::uploadToWebsite($source);

那一行，更改为

$uploaded_id = CHV\Image::uploadToWebsite($source,用户名);

将用户名替换为图床中的用户名。

前端添加上传按钮(media button)

将以下代码添加到WordPress正在使用的主题目录的functions.php中。

//添加图床上传按钮
add_action('media_buttons', 'add_my_media_button');
function add_my_media_button() {
$currentUser = wp_get_current_user();
if(!empty($currentUser->roles) && in_array('administrator', $currentUser->roles)){
$DOMAIN="img.moeyao.cn";// 不能带有https：//，结尾不能有/，否则会上传失败
$APIkey="图床的API v1 key";// 是管理员
}
else
return 0; // 非管理员
echo '
<input id="up_to_chevereto" 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> 上传图片到Chevereto</label>
';
?>
<style type="text/css">
#up_to_chevereto {
display: none;
}
#up_img_label {
color: #fff;
background-color: #16a085;
border-radius: 5px;
display: inline-block;
padding: 5.2px;
}
</style>
<script type="text/javascript">
jQuery('#up_to_chevereto').change(function() {
window.wpActiveEditor = null;
for (var i = 0; i < this.files.length; i++) {
var f=this.files[i];
var formData=new FormData();
formData.append('source',f);
jQuery.ajax({
async:true,
crossDomain:true,
url:'https://<?php echo $DOMAIN; ?>/api/1/upload/?key=<?php echo $APIkey; ?>&format=json',
type : 'POST',
processData : false,
contentType : false,
data:formData,
beforeSend: function (xhr) {
jQuery('#up_img_label').html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
},
success:function(res){
wp.media.editor.insert('<a href="'+res.image.url+'"><img src="'+res.image.url+'" alt="'+res.image.title+'"></img></a>');
jQuery("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功,继续上传');
},
error: function (){
jQuery("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
}
});
}
});
</script>
<?php
}

将

$DOMAIN="img.moeyao.cn";

中的域名修改为需要使用的图床的域名。
域名不能带有https：//，结尾不能有/，否则会上传失败

$APIkey="图床的API v1 key";

修改为自己获取到的API v1 密钥。
修改完成就可以使用了。