PHP Ueditor 富文本編輯器

2016年12月11日 08:46:59 星期日

百度的簡版富文本編輯器umeditor很久沒更新了

全功能版本的配置項跟umeditor還是有區別的, 這里說下ueditor怎么對接到項目中去, 主要說明圖片上傳怎么使用

HTML:

//承載編輯器
<script id="container" name="content" type="text/plain"></script>


//加載js
<script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.all.min.js"></script>

<script type="text/javascript">
    //實例化編輯器
    var ue = UE.getEditor('container',
            {
                initialContent:'',
                initialFrameWidth:1000,
                initialFrameHeight:240,
                serverUrl:"<?= BASEURL ?>Home/Upload/ueUpload",
                imagePath:"", //路徑前綴
　　　　　　　　　　　imageUrlPrefix:'' //image前綴, 如果服務端返回的圖片地址中有http://...那這里就留空, 此項必須有

            });
</script>

注意: 第16行, 要寫你的PHP代碼可訪問鏈接, ueditor會自動拼接相關的參數去指明要什么東西:

第一步: ueditor會先拼接上 ?action=config 告訴PHP返回一些配置信息,

第二步: ueditor獲取上一步返回的json配置信息后拼接上 ?action=xxx 再次請求進行圖片上傳

 

PHP代碼(上傳到了阿里雲)

/**
 * 百度ueditor編輯器調用,
 * 對應js配置項為serverUrl
 */
public function ueUpload()
{
    $arg = I('get.action');
    switch ($arg) {
        case 'config':
            exit('{
                    /* 上傳圖片配置項 */
                    "imageActionName": "ueUploadImage", /* 執行上傳圖片的action名稱 */
                    "imageFieldName": "ueUpfile", /* 提交的圖片表單名稱 */
                    "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
                    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
                    "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
                    /* 截圖工具上傳 */
                    "snapscreenActionName": "ueUploadImage", /* 執行上傳截圖的action名稱 */
                }');
            break;
        case 'ueUploadImage': //這個值對應上個case中的ueUploadImage
            $oss = new Upload();
            $url = $oss->up('ueUpfile', 'ueditor'); //ueUpfile 對應上個case中的ueUpfild
            if ($oss->isOk()) { //上傳成功
                $rs = [
                    'state' => 'SUCCESS',
                    'url' => $url,
                    'title' => '',
                    'original' => ''
                ];
                $this->ajaxReturn($rs);
            } else { //上傳失敗
                $rs = [
                    'state' => '上傳圖片失敗',
                ];
                $this->ajaxReturn($rs);
            }
            break;
        default:
            exit();
    }
}

注意:

1. 第12行和第21行的配置是對應的, 第13行的值就是上傳的$_FILES中的表單名字

2. 注意25~30行, 是上傳成功后的返回結構(轉為json返回)

3. 注意33~35行, 是上傳失敗后的返回結構(轉為json返回)