之前介绍过使用 PicGo 进行一键上传图片到 Chevereto 图床的操作，如果使用 WordPress 写文章的时候不想装 PicGo 的话，还可以在写文章编辑器里增加一个按钮，方便边写文章边同步图片到图床然后插入到文章里。

本文的代码来自 Spiritx：
https://spiritx.xyz/843.html

实现功能后的效果如下：

除了增加 上传图片到Chevereto 功能外，编辑器本身还使用了 Markdown 写作插件 WP Editor。

编辑 route.api.php 允许跨域

进入 Chevereto 图床服务的文件目录，拷贝和编辑 route.api.php 文件实现允许跨域：

cd app/routes/
cp route.api.php overrides/route.api.php

对 app/routes/overrides/ 目录下的 route.api.php 进行编辑：

// route.api.php 第二行加入以下代码，https://localhost 改为自己的 WordPress 所用域名
header('Access-Control-Allow-Origin: https://localhost');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, Origin, Accept');

然后在这个文件内找到 $uploaded_id = CHV\Image::uploadToWebsite($source); （一般在105行），替换为以下代码：

// admin 为图床中的用户名
$uploaded_id = CHV\Image::uploadToWebsite($source,admin);

编辑 functions.php 增加一键上传按钮

打开 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="localhost";
            $APIkey="youkey"; // 是管理员
        }
        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="localhost"; 里的 localhost 改为图床域名，把 $APIkey="youkey"; 里的 youkey 改为图床 api，然后保存编辑。

接下来打开写文章编辑器，就可以看到一键上传图床的按钮了。