注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php开发lamp

《西安--木木》-经历丰富了生活。 架构师QQ群: 246695517

 
 
 

日志

 
 

百度Ueditor项目中使用,配置  

2013-01-15 04:29:40|  分类: 插件 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:

    _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)中的步骤:

百度Ueditor项目中使用,配置 - 灵清溪水 - 翠竹之家-竹的精气神

            图表 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
    );



 


 

  评论这张
 
阅读(12996)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017