百度编辑器UEditor的文件上传分离目录配置
最近做个小网站,在用编辑器的时候选择了百度UEditor ,主要是因为感觉他的UI 还不错,大概看了还还支持自定义一些东西,所以就下下来配置了下。当配置到文件上传的时候遇见问题了,他默认的时候把文件传
最近做个小网站,在用编辑器的时候选择了百度UEditor ,主要是因为感觉他的UI 还不错,大概看了还还支持自定义一些东西,所以就下下来配置了下。
当配置到文件上传的时候遇见问题了,他默认的时候把文件传到编辑器editor 目录下的php 目录下的upload 目录,这个很奇怪,虽然装上就能用,但是很不合理。
1 一般上传目录在系统里面是单独的,需要有单独的权限。
2 编辑器的JS 包核心部分也应该是独立的和后台程序也分开。
3 后台处理程序单独独立
鉴于这三点,看了官方的文档,说名有修改这几个的地方但是不是很详细。于是乎,就根据上面的说明和自己的调试,下面是现实中经常遇见的一种布局:
4 网站在电脑上的目录 d:/webserver/www/site1/ , 网站的访问地址 http://www.xxxx.com/site1/,网站的根目录
5 网站的编辑器存放目录 d:/webserver/www/site1/v/editor, 页面访问地址 /site1/v/editor/ , 编辑器的JS 核心程序目录
6 网站文件上传目录 d:/webserver/www/site1/files/, 页面访问地址 /site1/files/,编辑器的文件上传目录
7 网上处理上传文件的目录 d:/webserver/www/site1/admin/doupload/,页面访问地址 /site1/admin/doupload/,这个目录主要是处理文件上传的程序对应编辑器里面的 php 目录
那么根据上面的条件我们就把编辑器的文件分别放于下面三个目录中
/site1/ ————————-网站目录
/site1/v/editor/ ————整个编辑器的核心文件
/site1/files/ ——————- 文件上传目录
/site1/admin/doupload/ — 存放ueditor 中php 文件
/site1/admin/news/add.php — 添加新闻的页面这个页面调用编辑器
接下来就是修改配置文件
1. 在调用编辑器的页面add.php 中增加如下的JS 代码
,window.UEDITOR_HOME_URL = '/site1/v/ueditor/'; // 这个是通过浏览器访问编辑器核心JS 文件的地址
window.UEDITOR_DO_URL = '/site1/admin/doupload/'; // 这个是处理上传文件的php 的URL 访问地址
window.UEDITOR_FILE_URL = '/site1/files/'; // 这个是上传文件后访问上传文件的修正前缀地址
2. 修改ueditor 的JS 配置文件editor_config.js,打开这个文件查找这行 URL = window.UEDITOR_HOME_URL||tmp.subst……
在这行下面添加如下两行代码
E_DO_URL = window.UEDITOR_DO_URL;
E_FILE_URL = window.UEDITOR_FILE_URL;
然后把下面所有配置都照下面的格式修改
,imageUrl: URL "imageUp.php" 修改为 ,imageUrl:E_DO_URL "imageUp.php" ,imagePath:URL 修改为 ,imagePath:E_FILE_URL
……
包括://涂鸦图片配置区 //附件上传配置区//远程抓取配置区//图片在线管理配置区 //屏幕截图配置区//word转存配置区//获取视频数据的地址等
3. 修改文件上传的PHP 程序
Uploader.class.php
/**
* Created by JetBrains PhpStorm.
* User: taoqili
,* Date: 12-7-18
* Time: 上午11: 32
* UEditor编辑器通用上传类
*/
//add by csk83 这里调入你自己的网站的配置信息,比如文件上传目录 , 这里也可以加入你网站的权限控制define('MY_UPLOAD_DIR', 'd:/webserver/www/site1/files/');// 这里要写文件目录地址
class Uploader
{
private $fileField; //文件域名
private $file; //文件上传对象
private $config; //配置信息
private $oriName; //原始文件名
private $fileName; //新文件名
private $fullName; //完整文件名, 即从当前配置目录开始的URL private $fileSize; //文件大小
private $fileType; //文件类型
private $stateInfo; //上传状态信息,
private $stateMap = array( //上传状态映射表,国际化用户需考虑此处数据的国际化
"SUCCESS" , //上传成功标记,在UEditor 中内不可改变,否则flash 判断会出错
," 文件大小超出 upload_max_filesize 限制" ,
" 文件大小超出 MAX_FILE_SIZE 限制" ,
" 文件未被完整上传" ,
" 没有文件被上传" ,
" 上传文件为空" ,
"POST" => "文件大小超出 post_max_size 限制" ,
"SIZE" => "文件大小超出网站限制" ,
"TYPE" => "不允许的文件类型" ,
"DIR" => "目录创建失败" ,
"IO" => "输入输出错误" ,
"UNKNOWN" => "未知错误" ,
"MOVE" => "文件保存时出错"
);
/**
* 构造函数
* @param string $fileField 表单名称
* @param array $config 配置项
* @param bool $base64 是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名
*/
public function __construct( $fileField , $config , $base64 = false )
,{
$this->fileField = $fileField;
$this->config = $config;
$this->stateInfo = $this->stateMap[ 0 ]; $this->upFile( $base64 );
}
/**
* 上传文件的主处理方法
* @param $base64
* @return mixed
*/
private function upFile( $base64 )
{
//处理base64上传
if ( "base64" == $base64 ) {
$content = $_POST[ $this->fileField ]; $this->base64ToImage( $content ); return;
}
//处理普通上传
,$file = $this->file = $_FILES[ $this->fileField ];
if ( !$file ) {
$this->stateInfo = $this->getStateInfo( 'POST' ); return;
}
if ( $this->file[ 'error' ] ) {
$this->stateInfo = $this->getStateInfo( $file[ 'error' ] ); return;
}
if ( !is_uploaded_file( $file[ 'tmp_name' ] ) ) {
$this->stateInfo = $this->getStateInfo( "UNKNOWN" ); return;
}
$this->oriName = $file[ 'name' ];
$this->fileSize = $file[ 'size' ];
$this->fileType = $this->getFileExt();
if ( !$this->checkSize() ) {
$this->stateInfo = $this->getStateInfo( "SIZE" ); return;
}
,if ( !$this->checkType() ) {
$this->stateInfo = $this->getStateInfo( "TYPE" ); return;
}
$this->fullName = $this->getFolder() . '/' . $this->getName(); if ( $this->stateInfo == $this->stateMap[ 0 ] ) {
if ( !move_uploaded_file( $file[ "tmp_name" ] , MY_UPLOAD_DIR .$this->fullName ) ) {
$this->stateInfo = $this->getStateInfo( "MOVE" ); }
}
}
/**
* 处理base64编码的图片上传
* @param $base64Data
* @return mixed
*/
private function base64ToImage( $base64Data )
{
$img = base64_decode( $base64Data );
$this->fileName = time() . rand( 1 , 10000 ) . ".png";
,$this->fullName = $this->getFolder() . '/' . $this->fileName;
if ( !file_put_contents($this->uploadDir . $this->fullName , $img ) ) { $this->stateInfo = $this->getStateInfo( "IO" );
return;
}
$this->oriName = "";
$this->fileSize = strlen( $img );
$this->fileType = ".png";
}
/**
* 获取当前上传成功文件的各项信息
* @return array
*/
public function getFileInfo()
{
return array(
"originalName" => $this->oriName ,
"name" => $this->fileName ,
"url" => $this->fullName ,
"size" => $this->fileSize ,
"type" => $this->fileType ,
,"state" => $this->stateInfo
);
}
/**
* 上传错误检查
* @param $errCode
* @return string
*/
private function getStateInfo( $errCode )
{
return !$this->stateMap[ $errCode ] ? $this->stateMap[ "UNKNOWN" ] : $this->stateMap[ $errCode ];
}
/**
* 重命名文件
* @return string
*/
private function getName()
{
return $this->fileName = time() . rand( 1 , 10000 ) . $this->getFileExt();
,}
/**
* 文件类型检测
* @return bool
*/
private function checkType()
{
return in_array( $this->getFileExt() , $this->config[ "allowFiles" ] ); }
/**
* 文件大小检测
* @return bool
*/
private function checkSize()
{
return $this->fileSize <= ( $this->config[ "maxSize" ] * 1024 ); }
/**
* 获取文件扩展名