一、官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：
_examples：编辑器完整版的示例页面
dialogs：弹出对话框对应的资源和JS文件
themes：样式图片和样式文件
php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里应该是jsp,php,.net
third-party：第三方插件(包括代码高亮，源码编辑等组件）
editor_all.js：_src目录下所有文件的打包文件
editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录
二、部署UEditor到实际项目（UETest）中的步骤:
图表 1
第一步：在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，起名为ueditor。
第二步：拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。其中，除了ueditor目录之外的其余文件均为具体项目文件，此处所列仅供示例。
第三步：为简单起见，此处将以根目录下的index.php页面作为编辑器的实例化页面，用来展示UEditor的完整版效果。在index.php文件中，首先导入编辑器需要的三个入口文件，示例代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
第四步：然后在index.php文件中创建编辑器实例及其DOM容器。具体代码示例如下：
<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>
<script type="text/javascript">
var editor = new UE.ui.Editor();
editor.render("myEditor");
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
</script>
最后一步： 在/UETest/ueditor/ editor_config.js中查找URL变量配置编辑器在你项目中的路径。
//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";
至此，一个完整的编辑器实例就已经部署到咱们的项目中了！在浏览器中输入http://localhost/UETest 运行下试试UE强大的功能吧！
三、注意事项
1.在引用editor_config.js时，最好先于editor_all.js加载，否则特定情况下可能会出现报错。
2.若希望给编辑器赋初值，请参考“前后端数据交互”
3. 需要注意的是编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。"相对于网站根目录的相对路径"也就是以斜杠开头的形如"/UETest/ueditor/"这样的路径。
此外如果你使用的是相对路径,例如"ueditor/"(相对于图表1路径结构)，如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，可能不适用于每个页面的编辑器。因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。
当然，需要令此处的URL等于对应的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";
例如：根据图表1的目录结构
如果你在index.php里使用编辑器，那么在editor_config.js里最上边的var URL就改成 var URL = "/UETest/ueditor/"
二、接下来配置ueditor
1.配置您网站的相对路径或者绝对路径
//URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）
//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/study/moonshop/lib/ueditor/";
2.配置图片上传（本地上传）
修改imageUp.php 文件
//ROOT是我项目的根目录 比如： D:/www/shop/
//上传配置
$config = array(
"savePath" => ROOT."data/upload/" , //图片要存储的目录
"maxSize" => 1000 , //单位KB
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )
);
3.修改ueditor回显路径，在ueditor窗口内能正常显示
$info = $up->getFileInfo();
/**
* 向浏览器返回数据json数据
* {
* 'url' :'a.jpg', //保存后的文件路径
* 'title' :'hello', //文件描述，对图片来说在前端会添加到title属性上
* 'original' :'b.jpg', //原始文件名
* 'state' :'SUCCESS' //上传状态，成功时返回SUCCESS,其他任何值将原样返回至图片上传框中
* }
*/
echo "{'url':'" . $info["url"] . "','title':'" . $title . "','original':'" . $info["originalName"] . "','state':'" . $info["state"] . "'}";
//*****************************
文件Uploader.class.php
/**
* 获取当前上传成功文件的各项信息
* @return array
*/
public function getFileInfo()
{
return array(
"originalName" => $this->oriName ,
"name" => $this->fileName ,
"url" => str_replace(ROOT,'',$this->fullName) ,//此处将之前增加的路径截掉
"size" => $this->fileSize ,
"type" => $this->fileType ,
"state" => $this->stateInfo
);
}
4.修改配置文件editor_config.js
//图片上传配置区
,imageUrl:URL+"php/imageUp.php" //图片上传提交地址
//,imagePath:URL + "php/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
,imagePath:"/study/moonshop/" //项目路径
至此图片上传功能 修改完毕
5.在线管理修改
//增加ROOT路径
$path = ROOT.'data/upload/'; //最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
$action = htmlspecialchars( $_POST[ "action" ] );
if ( $action == "get" ) {
$files = getfiles( $path );
if ( !$files ) return;
rsort($files,SORT_STRING);
$str = "";
foreach ( $files as $file ) {
$file = str_replace(ROOT,'',$file);//截掉ROOT路径
$str .= $file . "ue_separate_ue";
}
echo $str;
}
6.//远程抓取图片配置getRemoteImage.php
//远程抓取图片配置
$config = array(
//增加ROOT路径
"savePath" => ROOT."upload/" , //保存路径
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ) , //文件允许格式
"maxSize" => 3000 //文件大小限制，单位KB
);
/**
* 远程抓取
* @param $uri
* @param $config
*/
function getRemoteImage( $uri,$config)
{
//忽略抓取时间限制
set_time_limit( 0 );
//ue_separate_ue ue用于传递数据分割符号
$imgUrls = explode( "ue_separate_ue" , $uri );
$tmpNames = array();
foreach ( $imgUrls as $imgUrl ) {
//http开头验证
if(strpos($imgUrl,"http")!==0){
array_push( $tmpNames , "error" );
continue;
}
//获取请求头
$heads = get_headers( $imgUrl );
//死链检测
if ( !( stristr( $heads[ 0 ] , "200" ) && stristr( $heads[ 0 ] , "OK" ) ) ) {
array_push( $tmpNames , "error" );
continue;
}
//格式验证(扩展名验证和Content-Type验证)
$fileType = strtolower( strrchr( $imgUrl , '.' ) );
if ( !in_array( $fileType , $config[ 'allowFiles' ] ) || stristr( $heads[ 'Content-Type' ] , "image" ) ) {
array_push( $tmpNames , "error" );
continue;
}
//打开输出缓冲区并获取远程图片
ob_start();
$context = stream_context_create(
array (
'http' => array (
'follow_location' => false // don't follow redirects
)
)
);
//请确保php.ini中的fopen wrappers已经激活
readfile( $imgUrl,false,$context);
$img = ob_get_contents();
ob_end_clean();
//大小验证
$uriSize = strlen( $img ); //得到图片大小
$allowSize = 1024 * $config[ 'maxSize' ];
if ( $uriSize > $allowSize ) {
array_push( $tmpNames , "error" );
continue;
}
//创建保存位置
$savePath = $config[ 'savePath' ];
if ( !file_exists( $savePath ) ) {
mkdir( "$savePath" , 0777 );
}
//写入文件
$tmpName = $savePath . rand( 1 , 10000 ) . time() . strrchr( $imgUrl , '.' );
try {
$fp2 = @fopen( $tmpName , "a" );
fwrite( $fp2 , $img );
fclose( $fp2 );
$tmpName = str_replace(ROOT,'',$tmpName);//**********************截掉ROOT路径
array_push( $tmpNames , $tmpName );
} catch ( Exception $e ) {
array_push( $tmpNames , "error" );
}
}
7.涂鸦修改 scrawlUp.php
//上传配置
$config = array(
"savePath" => ROOT."data/upload/" , //存储文件夹
"maxSize" => 1000 , //允许的文件最大尺寸，单位KB
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ) //允许的文件格式
);
8.附件上传fileUp.php
//上传配置
$config = array(
"savePath" => ROOT."data/upload/" , //保存路径
"allowFiles" => array( ".rar" , ".doc" , ".docx" , ".zip" , ".pdf" , ".txt" , ".swf" , ".wmv" ) , //文件允许格式
"maxSize" => 100000 //文件大小限制，单位KB
);
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
