wordpress后台编辑器调用api增加图片上传功能的教程

如果wordpress中的图片是分离的，比如说有个单独的图床，并且可以调用api的话，那么可以用下面的代码实现在wordpress后台编辑器直接调用api，上传图片到图床。这样省去了到图床上传图片的麻烦。

<?php
//添加图床上传按钮
add_action('media_buttons', 'add_my_media_button');
function add_my_media_button() {
    echo '<input id="boxmoe_up_img" type="file" accept="image/*" multiple="multiple"/>
          <label for="boxmoe_up_img" id="up_img_label" class="button"> 上传图片到图床</label>
    ';
?>
<style type="text/css">
    #boxmoe_up_img {display: none;}
    #up_img_label:before {font-family: dashicons;content: "\f128";}
</style>
<script type="text/javascript">
  jQuery('#boxmoe_up_img').change(function() {
    window.wpActiveEditor = null;
    for (var i = 0; i < this.files.length; i++) {
      var f=this.files[i];
      if (!/image\/\w+/.test(f.type)) {
        alert('请选择图片文件(png | jpg | gif)');
        return
      }
      var formData=new FormData();
      formData.append('image',f); //这里的image就是api的post参数要修改的地方
      jQuery.ajax({
        async:true,
        crossDomain:true,
        url:'这里就是api的地址，也就是上传接口', //这里就是api的地址，也就是上传接口
        headers : {"token" : "your token"}, //如果需要在header中token认证的话
        type : 'POST',
        processData : false,
        contentType : false,
        dataType: 'json',
        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.data.url +'><img src='+ res.data.url +' ></img></a>'); //boxmoe提示：res.data.url 这里的url就是返回的参数
          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
}