WordPress – 编辑器添加Chevereto图床按钮[教程笔记]

前言

前段时间搭建了 Chevereto 图床，但在 WordPress 编辑器里需要上传图片的时候，需要另外打开图床上传比较麻烦。这时候可以在 WordPress 的编辑器里添加个上传按钮，利用 API 上传到 Chevereto 图床，这样上传图片到图床就方便啦！

百度了很多，但方法都不奏效，最后还是找到了大佬分享的一个方法：

以下的操作均在 functions.php 中完成。

注册路由

add_action('rest_api_init', function () {
    register_rest_route('chevereto/v1', '/image/upload', array(
        'methods' => 'POST',
        'callback' => 'upload_to_chevereto',
    ));
});

之后，可以使用 post 的方式发送数据到 http(s)://博客域名/chevereto/v1/image/upload 来上传图片。

加入回调函数

function upload_to_chevereto() {
    //Authentication
    if (!check_ajax_referer('wp_rest', '_wpnonce', false)) {
        $output = array('status' => 403,
            'message' => 'Unauthorized client.',
            'link' => $link,
        );
        $result = new WP_REST_Response($output, 403);
        $result->set_headers(array('Content-Type' => 'application/json'));
        return $result;
    }
    $image = file_get_contents($_FILES["chevereto_img_file"]["tmp_name"]);
    $upload_url = '图床的域名/api/1/upload';
    $args = array(
        'body' => array(
            'source' => base64_encode($image),
            'key' => '图床的 API v1 key',
        ),
    );

    $response = wp_remote_post($upload_url, $args);
    $reply = json_decode($response["body"]);

    if ($reply->status_txt == 'OK' && $reply->status_code == 200) {
        $status = 200;
        $message = "success";
        $link = $reply->image->image->url;
    } else {
        $status = $reply->status_code;
        $message = $reply->error->message;
        $link = $link;
    }
    $output = array(
        'status' => $status,
        'message' => $message,
        'link' => $link,
    );
    $result = new WP_REST_Response($output, $status);
    $result->set_headers(array('Content-Type' => 'application/json'));
    return $result;
}

将图床的域名和图床的 API v1 key 填写完整，注意加上 http 或 https

后台编辑器添加按钮

//添加图床上传按钮
add_action('media_buttons', 'add_my_media_button');
function add_my_media_button() {
    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('chevereto_img_file',f);
    jQuery.ajax({
        async:true,
        crossDomain:true,
        url:'<?php echo rest_url("chevereto/v1/image/upload") ."?_wpnonce=". wp_create_nonce("wp_rest"); ?>',
        type : 'POST',
        processData : false,
        contentType : false,
        data:formData,
        beforeSend: function () {
            jQuery('#up_img_label').html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
        },
        success:function(res){
            if (res.status == 200) {
                wp.media.editor.insert('<a href="'+res.link+'"><img src="'+res.link+'" alt="'+f.name+'"></img></a>');
                jQuery("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功,继续上传');
            }else{
                console.log("code: "+res.status+"message: "+res.message);
            }
        },
        error: function (){
            jQuery("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
        }
    });
  }
});
</script>
<?php
}