Yii集成Ueditor

1. 到Ueditor官网下载Ueditor mini版（有PHP,JSP等版本）

2. 将umeditor.config.js， umeditor.min.js文件以及dialogs文件夹、lang文件夹和theme s文件umeditor夹放到前台对应的地方（script或lib文件夹下）

3. 将PHP文件夹下的文件放置到extensions文件夹下，目录为/extensions/ueditor，该文件夹下包括imageUp.php和Uploader.class.php; 

    由于Uploader.class.php文件下的类名为Uploader，而Yii的autoload是根据类名来加载php文件的，因此要将文件名和类名统一，将Uploader.class.php改为Uploader.php

4. 在import中引入：

    'import'=>array(
        'application.models.*',
        'application.components.*',
        'application.behaviors.*',
        'ext.mongo.*',
        'ext.ueditor.*',
        'application.components.ae.*',
        'application.components.ae.apiservice.*',
        'application.modules.api.controllers.ApiController',
        'application.modules.resque.controllers.ResqueBaseController',
        'application.modules.campaign.controllers.CampaignBaseController',
    ),

5. 将imageUp.php文件中的内容改写成对应action的内容：

    /**
     * Upload ueditor image
     */
    public function actionUeditorUpload()
    {
        $path = '/upload/ueditor/';
        $config = array(
            "savePath" => dirname(Yii::app()->basePath) . $path,
            "maxSize" => 1000,
            "allowFiles" => array(".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp")
        );

        $up = new Uploader("upfile", $config);
        $editorId=Yii::app()->request->getQuery('editorid');
        $info = $up->getFileInfo();
        $url = $this->_getUrl($path, $info['url']);
        if(Yii::app()->request->isAjaxRequest){
            echo $url;
        }else{
            echo "<script>parent.UM.getEditor('". $editorId ."').getWidgetCallback('image')('" . $url . "','" . $info[ "state" ] . "')</script>";
        }
    }

    /**
     * Get relative url
     *
     * @example
     * $url: D:\software\wamp\www\campaign-portal\src/upload/ueditor/20140401/13963438781680.jpg,
     * $path: /upload/ueditor/
     * return upload/ueditor/20140401/13963438781680.jpg
     * 
     * @param string $path, absolute path
     * @param string $url, relative url
     * @return string, image path
     */
    private function _getUrl($path, $url)
    {
        $index = strpos($url, $path);
        $url = substr($url, $index + 1);
        return $url;
    }

不明白actionUeditorUpload方法中

echo "<script>parent.UM.getEditor('". $editorId ."').getWidgetCallback('image')('" . $url . "','" . $info[ "state" ] . "')</script>";

是什么意思，有待高手解释！！

6. 修改umeditor.config.js文件，将window.UMEDITOR_HOME_URL 设置到ueditor文件夹放置的位置，我自己项目设置的是（根据自己项目的名字和路径来定）：

window.UMEDITOR_HOME_URL = "/app/js/lib/ueditor/";

7. 修改umeditor.config.js文件中上传图片的配置，我的配置如下：

        //图片上传配置区
        ,imageUrl:"/api/file/ueditorUpload"             //图片上传提交地址
        ,imagePath:"/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        ,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

imageFieldName参数不需要修改

imageUrl指向后台的一个action

imagePath是在后台返回的$url （即上面的actionUeditorUpload方法返回的$url）前面加上该imagePath， 如果$url 是/upload/ueditor/54653213255.jpg, imagePath是test/img，则前台将用test/img/upload/ueditor/54653213255.jpg来显示图片,效果图：

注意：Ueditor和angularjs集成的时候，我使用了requirejs来加载的有关ueditor的js文件，总是在强制刷新页面(F5或Ctrl+F5)的时候显示出来，而通过别的链接点过来的时候却不显示Ueditor，最后只好将js和css的加载放在了页面里面：

<link href="/app/js/lib/ueditor/themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/app/js/lib/ueditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/app/js/lib/ueditor/umeditor.min.js"></script>
<script type="text/javascript" src="/app/js/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<div class="main-wrapper">
    <div class="sideBarLeft">
        <ng-navigation target="#nav-audiences"></ng-navigation>
    </div>
    <div class="mainContent">
        <div class="content full-header">
            <div class="container-fluid">
                <div class="fixed-header">
                    <h2 class="title">发送邮件</h2>
                    <a href="/{{projectAlias}}/audience" class="glyphicon glyphicon-remove back"></a>
                </div>
                <div class="actual-content">
                    <script type="text/plain" id="emailEditor" style="width:1000px;height:240px;">
                        <p>这里我可以写一些输入提示</p>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('emailEditor');
</script>