关键词：
在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在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:
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‘]; //重置要返回给ueditor的图片路径,这一步可以让图片在编辑器内正常显示图片
3.改完这两个地方之后就是自己写一个上传图片的接口啦，比较简单也有一堆的例子，我这里就不贴出来了，这样三步下来不出意外已经可以跨域上传图片了，无论是单图还是多图都可以，既简单又方便！！！
ueditor富文本编辑器
在配合vue和webpack使用时，在严格模式下注意会报错，需要修改配置。 因为es6默认的是严格模式，所以会有报错，我的解决办法是配置es2015: 配置babelrc文件即可：{//"presets":["vue-app"],"presets":[[‘es2015‘,{modules:false}]... 查看详情
百度富文本编辑器ueditor
前言 配置.netmvc4项目使用ueditor编辑器，在配置过程中遇见了好几个问题，以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net的开发包，如下图，我下载的是1.2.6.1net版本的开发包。配置：1... 查看详情
百度ueditor富文本上传图片(代码片段)
项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误，上传功能将不能正常使用！错误》/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"inputForm",/*提交的图片表单... 查看详情
springmvc--对接ueditor(富文本编辑器)(代码片段)
工作中需要用到UEditor编辑文本，在与springMVC进行整合时，出现了一些问题，结果导致，在进行图片上传时出现如下提示： 上网查询了很多相关资料，此处简要记录下，防止以后遇到类似问题。 一种方式是直接修改源码... 查看详情
在vue2.0中集成ueditor富文本编辑器(代码片段)
在vue的’项目中遇到了需要使用富文本编辑器的需求，在github上看了很多vue封装的editor插件，很多对图片上传和视频上传的支持并不是很好，最终还是决定使用UEditor。这类的文章网上有很多，我进行了摸索、手写代码、汇总、... 查看详情
使用百度umeditor富文本编辑器，修改自定义图片上传，修改源码
富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用UEDITOR：百度开发的插件，lite版是UMEasyUI编... 查看详情
springboot整合百度ueditor富文本
...供的demo和js导入项目中 2.编写html 这步创建好了编辑器然后我们会发现图片不能上传 出现这个问题之后我们去config.j 查看详情
editor富文本编辑器配置不含图片上传
一，下载地址：http://ueditor.baidu.com/website/download.html 1）根据需要下载相应版本 例 Java：选择jsp+utf-8；二，放置在项目中 1）解压下载文件，并重命名为editor； 2）复制文件放置在项目webapp目录下； 3）把edi... 查看详情
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
//预览<divclass="htmlViewBox"> <pv-html="activity_html_defaultMsg"v-show="htmlDefaultMsg"></p> <pv-show="defaultMsg==‘‘&&htmlDefaultMsg==‘‘">请在富文本编辑器内容</p></div& 查看详情
ueditor编辑器怎么调用
ueditor编辑器的调用方法：1、官方下载最新ASP版本，解压后文件夹自行修改，建议放在根目录下。2、用记事本打开\\bdu123\\asp\\config.json文件，修改里面图片、音乐、附件等的上传地址，../../upload代表上传的图片将自动放在网站根... 查看详情
百度ueditor富文本编辑器上传视频设置封面和禁止视频全屏下载功能
...的编写，之前她们是直接把微信公众号文章复制到ueditor编辑器中，这样子是可以直接使用的。这样带来的一个问题是，如果文章里有视频播放的话，视频的播放源全都是腾讯视频，我们公司商务反对了这种行为，所以运营提出... 查看详情
ueditor富文本编辑器时，插入图片没有任何反应(代码片段)
1、信息:Unabletofind‘struts.multipart.saveDir‘propertysetting.Defaultingtojavax.servlet.context.tempdir这是struts需要在struts.xml配置临时文件夹。只需要在struts.xml的<struts></struts>中添加一下语句即可。<constantname= 查看详情
ueditor1.4.3.3富文本编辑器在图片不显示问题
...告，于是乎百度了一下找到一个百度的ueditor 富文本编辑器，由于帮助文档相比而言比较容易看懂，所以就选用了这个，但是也遇到了一些问题 好了 不废话 直接上代码：此项目是javaEE 项目 首先在 ... 查看详情
解决百度富文本编辑器ueditor插入视频后没有路径的问题
...bsp;Updateueditor.config.js文件中，xssFilter导致插入视频异常，编辑器在切换源码的过程中过滤掉img的_url属性（用来存储视频url）_src/plugins/video.js里处理的是_url，而不是_src。修改ueditor.config.js：img: [‘src‘,‘alt‘,‘title‘,‘... 查看详情
百度的富文本编辑器ueditor添加图片自动加上宽度和高度的属性
若是没有对编辑器做任何配置直接添加图片的话，显示的html内容如下图所示：它会显示出原图片尺寸所以必须要对图片的初始显示尺寸做控制：ueditor文件中找到image.js文件在image.js中找到如下图所示：在此处添加上所要想显示的... 查看详情
ueditor文件上传问题
...会遇到，要有上传文件一类的事情。我发现百度的富文本编辑器带上传功能，但是没有办法给后台传递我们要的参数。先在ueditor.all.js中找到， me.execCommand(‘insertHtml‘,html); 在它下面添加： me.fireEvent(‘afterUpfile‘,file... 查看详情
富文本编辑框比较
几种知名开源富文本编辑器记录和对比（仅供参考）搬运出处: https://www.jianshu.com/p/002eb6277f9d1、UEditor百度的。优点：插件多，基本满足各种需求，类似贴吧中的回复界面。缺点：不再维护，文档极少，使用并不普遍，图片只... 查看详情
djangoxadmin集成djangoueditor富文本编辑器(代码片段)
本文档记录自己的学习历程！介绍UeditorHTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题Ueditor下载地址https://github.com/wsqy/DjangoUeditor.git解压后将DjangoUeditor文件夹复制到django项目目录... 查看详情