前言
由于很多coder在做前后端分离的项目的时候使用到ueditor，由于跨域的问题会导致文件上传成功编辑器却显示上传失败并且无法在编辑器里面显示。在网上收集了很多资料，都差点放弃使用ueditor了，使用其他编辑器，不过结合了官网和其他的教程还是找到了解决办法。该文档是前端为vue，后端为php，后端框架为thinkphp5.0+，写得不好大家多多指教。
前端
1、下载百度ueditor官网最新的ueditor（1.4.3版本）
将下载的ueditor安装到vue项目的目录，这里不多讲，可以百度。
2、修改ueditor根目录ueditor.all.js文件
打开文件后搜索plugins/simpleupload.js，应该会定位大概在24455行左右的位置。往下20行左右找到
domUtils.on(input, 'change', function() {
....
}
将此处修改为
domUtils.on(input, 'change', function() {
if(!input.value) return;
var loadingId = 'loading_' + (+new Date()).toString(36);
var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
var allowFiles = me.getOpt('imageAllowFiles');
me.focus();
me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
/!* 判断后端配置是否没有加载成功 *!/
if (!me.getOpt('imageActionName')) {
errorHandler(me.getLang('autoupload.errorLoadConfig'));
return;
}
// 判断文件格式是否错误
var filename = input.value,
fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
return;
}
var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
var formData = new FormData();
formData.append(me.options.imageFieldName, form[0].files[0] );
$.ajax({
url: action,
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function (data) {
var link, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
link = me.options.imageUrlPrefix + data.url;
if(data.state === 'SUCCESS' && data.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', data.title || '');
loader.setAttribute('alt', data.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
} else {
showErrorLoader && showErrorLoader(data.state);
}
form.reset();
}
});
function showErrorLoader(title){
if(loadingId) {
var loader = me.document.getElementById(loadingId);
loader && domUtils.remove(loader);
me.fireEvent('showmessage', {
'id': loadingId,
'content': title,
'type': 'error',
'timeout': 4000
});
}
}
});
其他的代码不用修改。修改是为了图片上传的部分改成ajax请求，这样子可以解决跨域问题。
后端
1、设置后端的Header，改成所有域名可以访问，或者指定域名访问。
TP框架打开public下的index.php设置，将一下代码加入其中，其他框架一样。
header('Access-Control-Allow-Origin:*'); // *号代表所有的域名都可以访问，可单独设置请求的域名
// 响应类型
header('Access-Control-Allow-Methods:*'); // *号代表可以接收所有的请求，可单独设置
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,X_Requested_With,content-type');
2、编写后台上传的代码。（以下tp5为列）
（1）新建一个控制器Ueditor.php。
（2）配置图片上传的统一入口，此入口需要填写到ueditor.config.js的serviceUrl。
public function index()
{
$action = Request::instance()->param('action');
if (method_exists($this, $action)) {
return $this->$action();
} else {
return jsonp(['state' => "请求地址出错"]);
}
}
（3）配置ueditor的后台配置文件，配置文件参考ueditor官网配置文档。
public function config()
{
$config = [
/* 上传图片配置项 */
"imageActionName" => "uploadImage", /* 执行上传图片的action名称 */
"imageFieldName" => "file",
"imageMaxSize" => 1048576, /* 上传大小限制，单位B */
"imageAllowFiles" => [".png", ".jpg", ".jpeg"], /* 上传图片格式显示 */
"imageInsertAlign" => "none", /* 插入的图片浮动方式 */
"imageUrlPrefix" => '', /* 图片访问路径前缀 */
/* 涂鸦图片上传配置项 */
"scrawlActionName" => "uploadImageFile", /* 执行上传涂鸦的action名称 */
"scrawlMaxSize" => 1048576, /* 上传大小限制，单位B */
"scrawlUrlPrefix" => '', /* 图片访问路径前缀 */
"scrawlInsertAlign" => "none",
// ............此处省略
];
return jsonp($config);
}
（4）编写上传文件的控制器
假设我们的配置文件中imageActionName的名字为uploadImage，那么我们图片上传的方法就应该为
public function uploadImage()
{
if (Request::instance()->isOptions()){
return jsonp(['state'=>'SUCCESS']);
}
$filePath =request()->file('file'); //file是前台表单提交的name，可以在配置文件中指定imageFieldName。
$info=$filePath->getInfo();
//此处为后台处理上传的逻辑代码
//upload
$ret=[
"state" => 'SUCCESS',
"url" => $info['src'],
"title" => $info['name'],
"original" => $info['name'],
"type" => $info['type'],
"size" => $info['size'],
];
return json($ret);
//返回ueditor固定的格式，必须严格按照此格式返回。
}
（5）其他的控制器跟着图片上传这个来就可以了。
至此就能够在ueditor正常上传文件了。如果还有不懂的可以留言。
注意事项
1、修改ueditor.config.js里面的serverUrl和ueditor静态文件地址。
window.UEDITOR_HOME_URL = "/static/editor/"; //修改此处为您的vue项目静态文件地址
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: "域名+/lawyer/Ueditor/index" //修改此处为您的服务器地址
//....省略
}
2、关于文中代码有jsonp和json的返回方式说明。
由于涉及跨域访问，所以将所有通过Ueditor自身请求的都需要使用JSONP方法来返回相应的参数，否则前端就不能正常接收到数据。因为上传图片的位置我们修改了ueditor.all.js里面的请求方式，所以控制器中只需要使用JSON方法来返回就能正常运行。
3、关于上传文件的方法中的一段代码Request::instance()->isOptions()的解释。
if (Request::instance()->isOptions()){
return jsonp(['state'=>'SUCCESS']);
}
为什么需要添加此行代码，关于这个问题我找了好半天，结果在ueditor的官方文档上发现了说明。因为在多图上传的时候，他同样的请求我们的图片上传方法，但是它会先发送一个OPTIONS请求进行试探，请求必须要返回状态码为200才能继续使用post请求上传图片。所以在这里需要设置这段代码。
4、关于返回值的说明。
所有的返回值都需要严格按照ueditor的返回值，必须携带的参数是state，请求成功返回SUCCESS，失败了就随意。其他参数查看ueditor官方文档。
网友评论