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

最新推荐文章于 2023-06-20 23:00:00 发布

无穷369

最新推荐文章于 2023-06-20 23:00:00 发布

阅读量2.1k

点赞数

分类专栏：分享文章标签：秀米富文本抓图七牛转存图片

本文链接：https://blog.csdn.net/zy598586050/article/details/88950403

版权

分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

制作图文排版秀米是一个不错的平台，而百度的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("&amp;", "&", $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代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo list</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    <!-- 引用js -->
    <script type="text/javascript" src="./release/wangEditor.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1')
        editor.customConfig.uploadImgServer = '/upload'
        // 限制一次最多上传 1 张图片
        editor.customConfig.uploadImgMaxLength = 1
        // 关闭粘贴样式的过滤
        editor.customConfig.pasteFilterStyle = false
        // 忽略粘贴内容中的图片
        editor.customConfig.pasteIgnoreImg = false
        // 自定义处理粘贴的文本内容
        editor.customConfig.pasteTextHandle = function (content) {
            //匹配图片
            var imgReg = /<img.*?(?:>|\/>)/gi;
            //匹配src属性
            var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
            //正则图片的个数
            var index = 0;
            var count = content.match(imgReg).length;
            console.log("图片个数",content.match(imgReg).length);
            var html = content.replace(imgReg,function(txt){
              return txt.replace(srcReg,function(src){
                var img_src = src.match(srcReg)[1];
                //正则把?x-oss-process后面的都去掉
                img_src = img_src.replace(/\?.*/i, "");
                console.log(img_src)
                //转存七牛
                var qn = urlToQiniu(img_src,createRandomId());
                var SRC = '你的七牛域名'+qn;
                //计算百分比
                index += 1;
                console.log((Math.round(index / count * 10000) / 100.00 + "%"));
                return 'src="'+SRC+'"';
              });
            });
            return html
        }
        editor.create();
      
        function urlToQiniu(url,name){
          var rt;
          $.ajax({
            type: 'POST',
            url: '/editor/qiniu.php',//换成你七牛的上传接口
            data: {
              url: url,
              name: name
            },
            async: false,//必须改为同步操作
            dataType: 'json',
            success: function(res){
              rt = res[0].key;
              console.log(res[0].key)
            }
          });
          return rt;
        }
      
        function createRandomId() {
            return (Math.random()*10000000).toString(16).substr(0,4)+'-'+(new Date()).getTime()+'-'+Math.random().toString().substr(2,5);
        }
      
    </script>
</body>
</html>

后端代码

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

$accessKey = '你的accessKey';
$secretKey = '你的secretKey';
$auth = new Auth($accessKey, $secretKey);
$bucket = '你的空间名';
$buck = new BucketManager($auth);
$res = $buck->fetch($_POST["url"],$bucket,$_POST["name"]);
exit(json_encode($res));

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

无穷369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器抓取秀米图片转存到七牛云

制作图文排版秀米是一个不错的平台，而百度的UEditor编辑器可以集成秀米的插件，两者结合使文章的排版变得更加的快捷方便。UEditor集成秀米教程 http://hgs.xiumi.us/uedit/但是在实际使用过程中会有一个问题，秀米提供的模板里的图片素材都是存储在秀米自己的服务器上的，而且做了防盗链，在你自己的文章系统里图片是不被显示的。所以我们要在此基础上加上图片转存的功...
复制链接

扫一扫