- 一、前言
- 二、下载 ueditor1_4_3_3-utf8-php 版本
- 1、进入github
- 2、点击 `25 tags`
- 3、选择自己需要的ueditor版本 例`v1.4.3.3` 下载
- 4、选择自己需要的后台语言版本
- 三、先熟悉config.json的配置
- 四、js 代码
- 五、php上传代码,think5.1为例
- 六、他山之石
一、前言
- ueditor是强大,但是目前来说是没维护了,这里只是拿来练一下手。
二、下载 ueditor1_4_3_3-utf8-php 版本
1、进入github
- 下载:UEditor Github 地址:http://github.com/fex-team/ueditor
2、点击 25 tags
3、选择自己需要的ueditor版本 例v1.4.3.3
下载
4、选择自己需要的后台语言版本
- ueditor1_4_3_3-utf8-php.zip
三、先熟悉config.json的配置
***ActionName
是上传类型的路由;***FieldName
是上传表单的名称;- 他们的对应关系如下
名称 | actionName | fieldName |
---|
上传图片配置项 | uploadimage | upfile |
*** | *** | *** |
四、js 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uEditor加载Demo</title>
</head>
<body>
<textarea id="uEditorID"></textarea>
</body>
<script type="text/javascript" src="/js/ueditor1_4_3_3-utf8-php/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" src="/js/ueditor1_4_3_3-utf8-php/utf8-php/ueditor.all.js"></script>
<script>
let imageUploadAction = [
'uploadimage',
'uploadscrawl',
'catchimage',
];
let videoUploadActions = [
'uploadvideo',
'uploadfile',
];
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
if (imageUploadAction.indexOf(action) > -1) {
return "{:url('/index/upload/uEditorUpload?action=uploadimage')}";
} else if (videoUploadActions.indexOf(action) > -1) {
return "{:url('/index/upload/uEditorUpload?action=uploadVideo')}";
} else if (action == "config") {
return this._bkGetActionUrl.call(this, action);
}
};
var ue = UE.getEditor('uEditorID', {
initialFrameHeight: 700
});
</script>
</html>
五、php上传代码,think5.1为例
public function uEditorUpload()
{
$actionName = isset($_REQUEST['action']) ? $_REQUEST['action'] : '';
$fieldName = ($actionName == 'catchimage') ? 'source' : 'upfile';
$file = request()->file($fieldName);
$uploadService = new UploadService();
$result = $uploadService->uEditorUpload($file, $actionName);
return json($result);
}
public function uEditorUpload($file, $actionName)
{
if ($actionName == 'uploadimage') {
$suffixCheck = ['ext' => 'jpg,png,gif,jpeg,bmp'];
} else {
$suffixCheck = ['ext' => 'jpg,png,gif,jpeg,bmp,avi,dat,mkv,flv,vob,wmv,asf,asx,mpe,mpg,mpeg,3gp,mov,mp4,zip,rar,pdf,swf,ppt,psd,ttf,txt,xls,doc,docx'];
}
$info = $file->validate($suffixCheck)->move('uploads');
if ($info) {
$saveName = $info->getSaveName();
$fileName = str_replace('\\', '/', $saveName);
$completePath = Env::get('root_path') . 'public/uploads/' . $fileName;
$fileType = $info->getExtension();
$fileSize = byte_format($info->getSize(), 2);
return [
"state" => 'SUCCESS',
"url" => $completePath,
"title" => $fileName,
"original" => $saveName,
"type" => $fileType,
"size" => $fileSize
];
} else {
return [
"state" => 'ERROR',
"url" => '',
"title" => '',
"original" => '',
"type" => '',
"size" => 0
];
}
}
六、他山之石
- thinkphp5.1对接ueditor(自定义上传接口)