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

_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
    );

百度Ueditor项目中使用,配置相关推荐

  1. [vue] 在vue项目中如何配置favicon?

    [vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...

  2. Vue项目中ESLint配置(VScode)

    Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...

  3. SpringBoot项目中ModelMapper配置以及使用

    项目中对象与对象赋值转换使用的频率非常的高,比如数据库表实体对象(Entity)与业务类对象(Model)之间的赋值传递,或者模型对象(Model)与视图对象(ViewModel)之间的赋值传递.如果 ...

  4. prefetch 和preload_Preload和Prefetch以及前端项目中的配置

    1.vuecli3.x or 4.x默认打包之后,部署到服务器上的项目,会对静态资源的标签上默认加载preload或者prefetch属性, 啥是preload和prefetch呢? Preload的 ...

  5. spring boot 注解_Spring-Boot项目中如何配置redis注解缓存?

    在pom中添加redis缓存支持依赖 <dependency><groupId>org.springframework.boot</groupId><arti ...

  6. Disconf介绍,源码下载,环境准备,安装,disconf-web使用和配置介绍,项目中进行配置,项目案例运行

    1.disconf介绍 Distributed Configuration Management Platform(分布式配置管理平台)专注于各种 分布式系统配置管理 的通用组件 / 通用平台,提供统 ...

  7. SpringBoot在项目中基本配置设置

    1.新增过滤器 (1)配置 @WebFilter(filterName = "corsFilter") public class CorsFilter extends OncePe ...

  8. 百度UEditor编译器中获取HTML内容和纯文本,设置UEditor编辑器的内容

    获取纯文本内容的方法: 1.editor.getContentTxt(); 获取编辑器中的纯文本内容,没有段落格式 javascript代码:示例 1 2 //编辑器html内容:<p>& ...

  9. vue项目中axios配置(代理配置)

    一.引入axios包 npm install sxios --save 二.建立axios文件夹 在src根目录下新建api文件夹 在api文件夹下新建ajax.js和index.js文件 ajax. ...

最新文章

  1. java rgb 黑色_Java实现图片亮度自动调节(RGB格式)
  2. java求数列的最大子段和_天下无双的公考必考题 数量关系: 最值问题②(构造数列)...
  3. SAP复合角色更改后扩展到派生节点
  4. 医保费用监控指标体系建立(四)医疗机构指标分析
  5. win10进程太多怎么优化_【电脑维护宝典】WIN10系统下的电脑维护(2)
  6. NET 2005 中通过TryParse来检验和转换数据类型。
  7. Linux 代码格式化工具 indent
  8. bzoj1053: [HAOI2007]反素数ant
  9. 345. Reverse Vowels of a String - LeetCode
  10. Zigbee 学习计划——第2天——熟悉CC2530的基本例程
  11. python 图表工具_7 款 Python 数据图表工具的比较
  12. 海盗分金问题 冲突分析—非合作博弈
  13. android 动画中插值器Interpolator详解
  14. 电子计算机为什么123安不出来,方正软件常见问题及其解决办法-精.doc
  15. 高通RAM dump解析简介
  16. 【Twitter 舆论分析】Twitter 爬虫绕过API限制
  17. Unity 实用小技巧(更新ing)
  18. logstash(10)过滤器-dissect
  19. eChats折线图更新数据不自然,要闪一下,动态数据解决
  20. 面试题:25匹马最快3匹及扩展

热门文章

  1. skynet中actor模型
  2. 五招搞定CET4翻译长句
  3. 摩根大通为ETH区块链的支付机制开发了新的隐私增强工具
  4. 1.Java中常见的重写
  5. @河南省文旅厅 携手让非遗“活”起来!
  6. RequestMapping中produces和consumes
  7. 服务器上登录网页ip地址,服务器ip作为网页地址
  8. 【收藏】做销售不得不看的几部电影
  9. OverFeat 论文 笔记
  10. 哈马斯再次自导自演,使用美人计针对以色列发起网络攻击