精华内容
下载资源
问答
  • 在使用百度富文本编辑器上传图片的过程中,如果有一台单独图片服务器就需要将上传图片放到图片服务器,比如在a.com编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ueditor官方文档中说不...

    在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ueditor官方文档中说不支持单图上传的跨域,网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,没搞清楚什么是跨域就敢定义为跨域,仔细研究了一下ueditor的demo文件,想出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可:

    首先引入页面ueditor编辑器,这里不多说,可以参考之前的一篇博客:Html引入百度富文本编辑器ueditor,这里默认你已经实现了ueditor的引入如下图:

    1.此时你上传的图片都是保存在本地的,如果想要跨域传到其它服务器,需要在ueditor/php/config.json配置文件中的图片配置项imageUrlPrefix加上域名,这样你在上传完图片之后返回给你的就是全路径的图片,在任何地方都可以显示,我这里以客户端a.com通过编辑器上传图片到img.com上,所以imageUrlPrefix配置为http://img.com,注意必须是带http://的全域名:

    2.修改完访问路径还需要修改ueditor/php/Uploader.class.php文件,找到 upFile() 方法,此方法就是demo中上传文件的主处理方法,修改这个上传方法比做什么代理页面、加js什么的更简单也更好理解,就算多个页面引入也没得问题:

        private function upFile()
        {
            $file = $this->file = $_FILES[$this->fileField];
            if (!$file) {
                $this->stateInfo = $this->getStateInfo("ERROR_FILE_NOT_FOUND");
                return;
            }
            if ($this->file['error']) {
                $this->stateInfo = $this->getStateInfo($file['error']);
                return;
            } else if (!file_exists($file['tmp_name'])) {
                $this->stateInfo = $this->getStateInfo("ERROR_TMP_FILE_NOT_FOUND");
                return;
            } else if (!is_uploaded_file($file['tmp_name'])) {
                $this->stateInfo = $this->getStateInfo("ERROR_TMPFILE");
                return;
            }
    
            $this->oriName = $file['name'];
            $this->fileSize = $file['size'];
            $this->fileType = $this->getFileExt();
            $this->fullName = $this->getFullName();
            $this->filePath = $this->getFilePath();
            $this->fileName = $this->getFileName();
            $dirname = dirname($this->filePath);
    
            //检查文件大小是否超出限制
            if (!$this->checkSize()) {
                $this->stateInfo = $this->getStateInfo("ERROR_SIZE_EXCEED");
                return;
            }
    
            //检查是否不允许的文件格式
            if (!$this->checkType()) {
                $this->stateInfo = $this->getStateInfo("ERROR_TYPE_NOT_ALLOWED");
                return;
            }
    
            //创建目录失败
            if (!file_exists($dirname) && !mkdir($dirname, 0777, true)) {
                $this->stateInfo = $this->getStateInfo("ERROR_CREATE_DIR");
                return;
            } else if (!is_writeable($dirname)) {
                $this->stateInfo = $this->getStateInfo("ERROR_DIR_NOT_WRITEABLE");
                return;
            }
    
            //移动文件
            if (!(move_uploaded_file($file["tmp_name"], $this->filePath) && file_exists($this->filePath))) { //移动失败
                $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");
            } else { //移动成功
                $this->stateInfo = $this->stateMap[0];
            }
         /**
          *此处上面的代码都是demo内的源代码不需要改,下面才是我加上的需要敲黑板划重点的地方,说一下思路,上面的代码会在本地生成上传的图片内容,然后我们就可以拿到上传的文件的全路径,
          *拿到全路径再调用事先封装好的上传接口上传到图片服务器即可,由于第一步配置了图片服务器的域名,所以最后返回给编辑器窗口的图片路径已经是带域名的全路径啦
          */
         $imgPath = '@'.$dirname.'/'.$this->fileName;//获取生成的本地文件完整路径
          
         //发送请求的参数
         $data = [
                'myFile'=>$imgPath,
                'imgType'=>4
            ];
         $serverUrl = 'http://img.com/api/image.action'; //请求地址
            $ch = curl_init(); //初始化
            curl_setopt($ch, CURLOPT_URL, $serverUrl);   
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_POST, true);
            //https协议需要以下两行,否则请求不成功
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
            //post方法所需要的参数
            curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
            curl_setopt($ch, CURLOPT_HTTPHEADER, array());
            $result = curl_exec($ch);
            curl_close($ch);
    
            $result = json_decode($result,true); //将接口返回的json数据转为数组
            $this->fullName = $result['imgUrlNormal']; //重置要返回给编辑器窗口的图片路径,这一步可以让图片在编辑器内正常显示图片
        }

    3.改完这两个地方之后,再自己写一个上传图片的接口啦,将上面的请求地址缓存你的接口地址,比较简单也有一堆的例子,我这里就不贴出来了,这样三步下来不出意外已经可以跨域上传图片了,无论是单图还是多图都可以,既简单好理解又方便!!!

    转载于:https://www.cnblogs.com/52lnamp/p/9714342.html

    展开全文
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
    目前限chrome浏览器使用
    首先以um-editor的二进制流保存为例:
    打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
    加入下面的代码:

    //判断剪贴板的内容是否包含文本

    //首先解释一下为什么要判断文本是不是为空

    //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

    //为了兼容4种格式的情况,做了如下的判断

    //如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

    //当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

    //如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

    var text = e.originalEvent.clipboardData.getData("text");

    if(text == ""){

        var items=e.originalEvent.clipboardData.items;

         for (var i = 0, len = items.length; i < len; i++) {

            var item = items[i];

           if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

             

                  var blob = item.getAsFile();

                  getBase64(blob, function( base64 ) {

                  //sendAndInsertImage(base64,me); 上传到服务器

                   setBase64Image(base64,me);

                  });

                  //阻止默认事件, 避免重复添加;

                  e.originalEvent.preventDefault();

                 };

            }

    }

    两个方法:

    //执行插入图片的操作

    function setBase64Image(base64,editor){

        editor.execCommand('insertimage', {src: base64,_src: base64});

    }

    //获得base64

    function  getBase64(blob, callback) {

        var a = new FileReader();

        a.onload = function(e) {callback(e.target.result);};

        a.readAsDataURL(blob);

    };

    效果展示:

    详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

    讨论群:223813913

    展开全文
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
    目前限chrome浏览器使用
    首先以um-editor的二进制流保存为例:
    打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
    加入下面的代码:

    //判断剪贴板的内容是否包含文本

    //首先解释一下为什么要判断文本是不是为空

    //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

    //为了兼容4种格式的情况,做了如下的判断

    //如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

    //当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

    //如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

    var text = e.originalEvent.clipboardData.getData("text");

    if(text == ""){

        var items=e.originalEvent.clipboardData.items;

         for (var i = 0, len = items.length; i < len; i++) {

            var item = items[i];

           if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

             

                  var blob = item.getAsFile();

                  getBase64(blob, function( base64 ) {

                  //sendAndInsertImage(base64,me); 上传到服务器

                   setBase64Image(base64,me);

                  });

                  //阻止默认事件, 避免重复添加;

                  e.originalEvent.preventDefault();

                 };

            }

    }

    两个方法:

    //执行插入图片的操作

    function setBase64Image(base64,editor){

        editor.execCommand('insertimage', {src: base64,_src: base64});

    }

    //获得base64

    function  getBase64(blob, callback) {

        var a = new FileReader();

        a.onload = function(e) {callback(e.target.result);};

        a.readAsDataURL(blob);

    };

    效果展示:

    详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

    讨论群:223813913

    展开全文
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
    目前限chrome浏览器使用
    首先以um-editor的二进制流保存为例:
    打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
    加入下面的代码:

    //判断剪贴板的内容是否包含文本

    //首先解释一下为什么要判断文本是不是为空

    //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

    //为了兼容4种格式的情况,做了如下的判断

    //如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

    //当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

    //如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

    var text = e.originalEvent.clipboardData.getData("text");

    if(text == ""){

        var items=e.originalEvent.clipboardData.items;

         for (var i = 0, len = items.length; i < len; i++) {

            var item = items[i];

           if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

             

                  var blob = item.getAsFile();

                  getBase64(blob, function( base64 ) {

                  //sendAndInsertImage(base64,me); 上传到服务器

                   setBase64Image(base64,me);

                  });

                  //阻止默认事件, 避免重复添加;

                  e.originalEvent.preventDefault();

                 };

            }

    }

    两个方法:

    //执行插入图片的操作

    function setBase64Image(base64,editor){

        editor.execCommand('insertimage', {src: base64,_src: base64});

    }

    //获得base64

    function  getBase64(blob, callback) {

        var a = new FileReader();

        a.onload = function(e) {callback(e.target.result);};

        a.readAsDataURL(blob);

    };

    效果展示:

    详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/10/19/%e5%85%b3%e4%ba%8e%e5%af%8c%e6%96%87%e6%9c%ac%e5%a4%8d%e5%88%b6word%e9%87%8c%e9%9d%a2%e6%8e%ba%e6%9d%82%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e7%9a%84%e9%97%ae%e9%a2%98/

    展开全文
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码目前限chrome浏览器使用首先以um-editor二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则存不下的这样子前台获取的时候就取不到)原因保存的时候,它把图片...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 最近做一个项目,项目做完了,再部署时候,人家要求webapps不能存放图片...上图,我们先找到图片保存路径 寻找BinaryUploader这个类然打断点,发现这里保存路径,于是修改这里。 修改如下图 uploadPath我...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则存不下的这样子前台获取的时候就取不到)原因保存的时候,它把图片...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 前段时间一直忙于各种事,今天有点空也不是很困...UEditor由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点那好,我们就来使用一下它一:首先我们到官网下载ueditor(网址:...
  • UEditor由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点 那好,我们就来使用一下它 一:首先我们到官网下载ueditor(网址:http://ueditor.
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流base64码 目前限chrome浏览器使用 首先以um-editor二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 但是FCKEditor附件(文件、图片、Flash等)是上传保存到Web服务器,在只有一台Web服务器情况下没有什么太大问题,但是如果我们系统有多个Web服务器实现NLB(网络负载均衡),那么用户将附件上传到其中一台...

空空如也

空空如也

1 2 3 4
收藏数 80
精华内容 32
关键字:

富文本上传图片保存的是什么