前言
由于很多coder在做前后端分離的項目的時候使用到ueditor，由于跨域的問題會導致文件上傳成功編輯器卻顯示上傳失敗并且無法在編輯器里面顯示。在網(wǎng)上收集了很多資料，都差點放棄使用ueditor了，使用其他編輯器，不過結(jié)合了官網(wǎng)和其他的教程還是找到了解決辦法。該文檔是前端為vue，后端為php，后端框架為thinkphp5.0+，寫得不好大家多多指教。
前端
1、下載百度ueditor官網(wǎng)最新的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、設(shè)置后端的Header，改成所有域名可以訪問，或者指定域名訪問。
TP框架打開public下的index.php設(shè)置，將一下代碼加入其中，其他框架一樣。
header('Access-Control-Allow-Origin:*'); // *號代表所有的域名都可以訪問，可單獨設(shè)置請求的域名
// 響應類型
header('Access-Control-Allow-Methods:*'); // *號代表可以接收所有的請求，可單獨設(shè)置
// 響應頭設(shè)置
header('Access-Control-Allow-Headers:x-requested-with,X_Requested_With,content-type');
2、編寫后臺上傳的代碼。（以下tp5為列）
（1）新建一個控制器Ueditor.php。
（2）配置圖片上傳的統(tǒng)一入口，此入口需要填寫到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官網(wǎng)配置文檔。
public function config()
{
$config = [
/* 上傳圖片配置項 */
"imageActionName" => "uploadImage", /* 執(zhí)行上傳圖片的action名稱 */
"imageFieldName" => "file",
"imageMaxSize" => 1048576, /* 上傳大小限制，單位B */
"imageAllowFiles" => [".png", ".jpg", ".jpeg"], /* 上傳圖片格式顯示 */
"imageInsertAlign" => "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix" => '', /* 圖片訪問路徑前綴 */
/* 涂鴉圖片上傳配置項 */
"scrawlActionName" => "uploadImageFile", /* 執(zhí)行上傳涂鴉的action名稱 */
"scrawlMaxSize" => 1048576, /* 上傳大小限制，單位B */
"scrawlUrlPrefix" => '', /* 圖片訪問路徑前綴 */
"scrawlInsertAlign" => "none",
// ............此處省略
];
return jsonp($config);
}
（4）編寫上傳文件的控制器
假設(shè)我們的配置文件中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靜態(tài)文件地址。
window.UEDITOR_HOME_URL = "/static/editor/"; //修改此處為您的vue項目靜態(tài)文件地址
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
/**
* 配置項主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。
*/
window.UEDITOR_CONFIG = {
//為編輯器實例添加一個路徑，這個不能被注釋
UEDITOR_HOME_URL: URL
// 服務器統(tǒng)一請求接口路徑
, serverUrl: "域名+/lawyer/Ueditor/index" //修改此處為您的服務器地址
//....省略
}
2、關(guān)于文中代碼有jsonp和json的返回方式說明。
由于涉及跨域訪問，所以將所有通過Ueditor自身請求的都需要使用JSONP方法來返回相應的參數(shù)，否則前端就不能正常接收到數(shù)據(jù)。因為上傳圖片的位置我們修改了ueditor.all.js里面的請求方式，所以控制器中只需要使用JSON方法來返回就能正常運行。
3、關(guān)于上傳文件的方法中的一段代碼Request::instance()->isOptions()的解釋。
if (Request::instance()->isOptions()){
return jsonp(['state'=>'SUCCESS']);
}
為什么需要添加此行代碼，關(guān)于這個問題我找了好半天，結(jié)果在ueditor的官方文檔上發(fā)現(xiàn)了說明。因為在多圖上傳的時候，他同樣的請求我們的圖片上傳方法，但是它會先發(fā)送一個OPTIONS請求進行試探，請求必須要返回狀態(tài)碼為200才能繼續(xù)使用post請求上傳圖片。所以在這里需要設(shè)置這段代碼。
4、關(guān)于返回值的說明。
所有的返回值都需要嚴格按照ueditor的返回值，必須攜帶的參數(shù)是state，請求成功返回SUCCESS，失敗了就隨意。其他參數(shù)查看ueditor官方文檔。
