原本我的做法都是需要上传图片的时候，再打开图床网站登录，选择图片上传然后再复制地址到wordpress后台，不得不说这种做法已经俗气了，而且很浪费时间。
一波三折的过程：
之前说过我二次开发的那个用layui直接在后台上传图片的，今天想着把之前写好的代码直接搬到wordpress这里面来，花了十分钟，终于把所有代码都搬过来了，打开新建页面一看，哦豁~~~layui和后台冲突了，一个发布框变成两个了。我果断放弃，开始找js实现的上传图片的代码，拿过来改改就行了。
很幸运，一会儿就找到了，果断开始搬代码，开始很快，然后就是各种报错，因为我用js调用 wp.media.editor.insert 插入信息到后台的编辑框，之后就各种 Warning: Use of undefined constant – assumed 的问题，花了不少时间，改各种php环境，甚至我降级到php5.6，但是还是有问题，搞得我头大。。。
之后在我快放弃的时候，灵光一现，是不是我的写法有问题？因为我是直接照搬别人的代码的，之前就压根没考虑到写法错误的问题，之后把JavaScript 代码放到单独的文件里面，然后在页面引用就一点毛病没有了。。。之后又花了几分钟把服务器的php环境还原。。。
最后，来个成功效果图和完整的代码吧。
完整的实现代码：
先挂载一个钩子到wordpress后台，把一些html代码写进去：
// wordpress后台添加一个第三方上传按钮
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="";
$APIkey="";// 是管理员
}
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> 上传到图床</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>
<!--这个引用是因为此代码基于Jquery，wp后台没有引用这个文件-->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--此引用则是重点，代码在下面-->
<script src="/wp-content/themes/mkBlog/ceshi.js"></script>
';
}咱们最重要的代码就是下面的这个，一定要单独弄一个js文件引用进去，否则肯定会和我报一样的错误！
$("#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('file',f);
formData.append('token_md5', 'AA81A1AD10605BEE19CA2B2212E5FCB3');
var res;
$.ajax({
async:true,
crossDomain:true,
url:'https://pic.mxooo.cn/api/upload',
type : 'POST',
processData : false,
contentType : false,
data:formData,
beforeSend: function (xhr) {
$('#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 class="aligncenter" src='+res.data.url+'></img></a>');
$("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功，继续上传');
},
error: function (){
$("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
}
});
}
});最后，说一下，我依旧是对接到我的第三方图床（lsky-pro图床）的，这个写法也是针对于我现在修改过的程序，如果原版的程序请注意这里面的写法（原版是headers请求头验证，我改成携带参数验证了。）
正文结束
