富文本编辑器抓取秀米图片转存到七牛云

制作图文排版秀米是一个不错的平台，而百度的UEditor编辑器可以集成秀米的插件，两者结合使文章的排版变得更加的快捷方便。

UEditor集成秀米教程 http://hgs.xiumi.us/uedit/

但是在实际使用过程中会有一个问题，秀米提供的模板里的图片素材都是存储在秀米自己的服务器上的，而且做了防盗链，在你自己的文章系统里图片是不被显示的。

所以我们要在此基础上加上图片转存的功能，让秀米的图存放在我们自己的服务器上，这样图片就可以正常显示了。

本次修改是让图片可以直接转存到七牛，作为一个独立的图片服务器，可以减轻主服务器的压力。

首先找到 ueditor.config.js这个文件，打开远程抓取功能

然后打开ueditor文件夹下php目录把下载好的七牛sdk放入，再打开下面的 Uploader.class.php文件，引入七牛

require 'qiniu/autoload.php';
use Qiniu\Auth;
use Qiniu\Storage\BucketManager;

将saveRemote方法修改成这样

    private function saveRemote()
    {
        $imgUrl = htmlspecialchars($this->fileField);
        $imgUrl = str_replace("&", "&", $imgUrl);
        //正则把?x-oss-process后面的都去掉
        $imgUrl = preg_replace('/\?.*/i', "", $imgUrl);

        //http开头验证
        if (strpos($imgUrl, "http") !== 0) {
            $this->stateInfo = $this->getStateInfo("ERROR_HTTP_LINK");
            return;
        }

        preg_match('/(^https*:\/\/[^:\/]+)/', $imgUrl, $matches);
        $host_with_protocol = count($matches) > 1 ? $matches[1] : '';

        // 判断是否是合法 url
        if (!filter_var($host_with_protocol, FILTER_VALIDATE_URL)) {
            $this->stateInfo = $this->getStateInfo("INVALID_URL");
            return;
        }

        preg_match('/^https*:\/\/(.+)/', $host_with_protocol, $matches);
        $host_without_protocol = count($matches) > 1 ? $matches[1] : '';

        // 此时提取出来的可能是 ip 也有可能是域名，先获取 ip
        $ip = gethostbyname($host_without_protocol);
        // 判断是否是私有 ip
        if(!filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE)) {
            $this->stateInfo = $this->getStateInfo("INVALID_IP");
            return;
        }

        //获取请求头并检测死链
        $heads = get_headers($imgUrl, 1);
        if (!(stristr($heads[0], "200") && stristr($heads[0], "OK"))) {
            $this->stateInfo = $this->getStateInfo("ERROR_DEAD_LINK");
            return;
        }
        //格式验证(扩展名验证和Content-Type验证)
        $fileType = strtolower(strrchr($imgUrl, '.'));
        if (!in_array($fileType, $this->config['allowFiles']) || !isset($heads['Content-Type']) || !stristr($heads['Content-Type'], "image")) {
            $this->stateInfo = $this->getStateInfo("ERROR_HTTP_CONTENTTYPE");
            return;
        }

        preg_match("/[\/]([^\/]*)[\.]?[^\.\/]*$/", $imgUrl, $m);

        $accessKey = '你的accessKey';
        $secretKey = '你的secretKey';
        $auth = new Auth($accessKey, $secretKey);
        $bucket = '你的空间名';
        $buck = new BucketManager($auth);
        $key = date('Ymd').str_pad(mt_rand(1, 99999), 5, '0', STR_PAD_LEFT);
        $buck->fetch($imgUrl,$bucket,$key);
        $this->fullName = '你的七牛域名'.$key;
        $this->stateInfo = $this->stateMap[0];

    }

如果百度编辑器里的上传单图也需要上传到七牛，那么再修改upFile方法

    private function upFile()
    {
        $accessKey = '你的accessKey';
        $secretKey = '你的secretKey';
        $auth = new Auth($accessKey, $secretKey);
        $bucket = '你的空间名';
        // 生成上传Token
        $token = $auth->uploadToken($bucket);
        // 构建 UploadManager 对象
        $uploadManager = new UploadManager();
        $file = $_FILES[$this->fileField];
        $key = time().'-'.$file['name'];
        $uploadManager->putFile($token, $key, $file["tmp_name"]);
        $this->fullName = '你的七牛域名'.$key;
        $this->stateInfo = $this->stateMap[0];
    }

在抓图替换这个过程中，可能由于图片过多需要等待，所以在粘贴了秀米排版好的文章后，要打开一个正在处理的动画。

修改xiumi-ue-dialog-v5.html文件的最下面，加入显示你动画样式的代码

当图片都替换完成之后，需要再将动画关闭掉。修改 ueditor.all.js文件的第23235行左右代码

这样百度编辑器抓取秀米图片转存到七牛云的功能就完成了。

另外wangEditor也是一个很好用的富文本编辑器，他的抓取秀米的图片转存七牛也类似。不过用这个有一个好处是可以监听图片的上传进度。

wangEditor编辑器文档地址 https://www.kancloud.cn/wangfupeng/wangeditor3/335769

贴一下我的Demo代码

    
    
    


    

        
欢迎使用 wangEditor 富文本编辑器
    
    
    
    
    

后端代码

fetch($_POST["url"],$bucket,$_POST["name"]);
exit(json_encode($res));

如果这篇文章对你有用的话，那就点一波关注和小心心吧！谢谢！