WordPress编辑器中添加Chevereto图床按钮

官方账号 2021-11-1916:28:17运维笔记4248字数 2662阅读8分52秒阅读模式

说明

程序不会出现任何上传通过wordpress编辑器里的上传按钮上传后都是上传了两份一样的图片,前提是需要本站破解版本Chevereto程序包,其他版本不敢保证。前往下载>>>文章源自玩技e族-https://www.playezu.com/28570.html

缘由

之前我的图片是放在用oneindex搭建的网盘上,blog文章的图片存放在Onedrive上,同步至oneindex,但似乎OneDrive的api接口对访问量有限制,有时我浏览博客的会发现图片不能显示。这样的情况持续了很久,直到我偶然了解到了 Chevereto ,于是决定搭建一个图床来存放图片。前段时间我把我博客文章的图片一张一张从OneDrive上转移到了Chevereto图床,虽然我的图片不算太多,但这种在图床页面上传再回到博客文章编辑页面的方式浪费了我很多时间,并且以后更新文章也会使用图床,我可不想这样一步步傻傻地操作。在Chevereto的仪表发现了API V1后,我开始研究。网上关于这个的资料很少,作为一个小白,我的探索之路很是艰辛。
先上一张成果图:文章源自玩技e族-https://www.playezu.com/28570.html

WordPress编辑器中添加Chevereto图床按钮文章源自玩技e族-https://www.playezu.com/28570.html

tip:支持多张图片上传哦!文章源自玩技e族-https://www.playezu.com/28570.html

获取API KEY

准备一个Chevereto搭建的图床(废话!),不会搭建的话请Google
登录,转到仪表盘-设置-API,将API v1 key记录下来,一会儿要用文章源自玩技e族-https://www.playezu.com/28570.html

API后端设置

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

允许跨域

打开app/routes/overrides/route.api.php,第二行(<?php后面)添加如下几行文章源自玩技e族-https://www.playezu.com/28570.html

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

记得把白名单https://www.playezu.com改成自己的域名或者改成*文章源自玩技e族-https://www.playezu.com/28570.html

设置API user(可选)

在app/routes/overrides/route.api.php中,找到$uploaded_id = CHV\Image::uploadToWebsite($source);那一行,更改为
$uploaded_id = CHV\Image::uploadToWebsite($source,管理员名字);

将管理员名字换为图床中的用户文章源自玩技e族-https://www.playezu.com/28570.html

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

将以下代码添加到WordPress正在使用的主题目录的functions.php中文章源自玩技e族-https://www.playezu.com/28570.html

//添加图床上传按钮
add_action('media_buttons', 'add_my_media_button');
function add_my_media_button() {
    $currentUser = wp_get_current_user();
        if(!empty($currentUser->roles) &amp;& in_array('administrator', $currentUser->roles)){
            $DOMAIN="图床的域名";
            $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
}

 文章源自玩技e族-https://www.playezu.com/28570.html

注意:本文法律责任由该文章作者承担,侵权请联系2523030730▷诈骗举报◁▷新闻不符◁▷我要投稿◁
  • 我们QQ群
  • QQ扫一扫
  • weinxin
  • 微信公众号
  • 公众号扫一扫
  • weinxin
评论:4   其中:访客  4   博主  0
    • 学习君
      学习君 7 来自天朝的朋友 谷歌浏览器 Windows 10 黑龙江省大庆市 电信

      这个代码很久之前就有了,也用过,难道你没遇到重复上传的问题吗?通过wordpress编辑器里的上传按钮上传后都是上传了两份一样的图片,概率100%,不知道为什么没有说这个问题

        • TestWhite
          TestWhite 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通

          @ 学习君 本人测试未复现,可能是程序版本的问题吧,我给你们录制个gif看看。

          • TestWhite
            TestWhite 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通

            @ 学习君 也不用,你可以直接访问我上传的账号相册里面看。https://img.playezu.com/testwhite/

            • TestWhite
              TestWhite 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通

              @ 学习君 没有任何一个重复的,而且可以支持批量上传,我认为和你的Chevereto版本有关系。

          匿名

          发表评论

          匿名网友

          确定