PHP Ueditor 富文本編輯器

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

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

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

HTML:

 1 //承載編輯器
 2 <script id="container" name="content" type="text/plain"></script>
 3 
 4 
 5 //加載js
 6 <script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.config.js"></script>
 7 <script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.all.min.js"></script>
 8 
 9 <script type="text/javascript">
10     //實例化編輯器
11     var ue = UE.getEditor('container',
12             {
13                 initialContent:'',
14                 initialFrameWidth:1000,
15                 initialFrameHeight:240,
16                 serverUrl:"<?= BASEURL ?>Home/Upload/ueUpload",
17                 imagePath:"", //路徑前綴
　　　　　　　　　　　imageUrlPrefix:'' //image前綴, 若是服務端返回的圖片地址中有http://...那這裏就留空, 此項必須有

18             });
19 </script>

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

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

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

 

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

 1 /**
 2  * 百度ueditor編輯器調用,
 3  * 對應js配置項爲serverUrl
 4  */
 5 public function ueUpload()
 6 {
 7     $arg = I('get.action');
 8     switch ($arg) {
 9         case 'config':
10             exit('{
11                     /* 上傳圖片配置項 */
12                     "imageActionName": "ueUploadImage", /* 執行上傳圖片的action名稱 */
13                     "imageFieldName": "ueUpfile", /* 提交的圖片表單名稱 */
14                     "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
15                     "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
16                     "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
17                     /* 截圖工具上傳 */
18                     "snapscreenActionName": "ueUploadImage", /* 執行上傳截圖的action名稱 */
19                 }');
20             break;
21         case 'ueUploadImage': //這個值對應上個case中的ueUploadImage
22             $oss = new Upload();
23             $url = $oss->up('ueUpfile', 'ueditor'); //ueUpfile 對應上個case中的ueUpfild
24             if ($oss->isOk()) { //上傳成功
25                 $rs = [
26                     'state' => 'SUCCESS',
27                     'url' => $url,
28                     'title' => '',
29                     'original' => ''
30                 ];
31                 $this->ajaxReturn($rs);
32             } else { //上傳失敗
33                 $rs = [
34                     'state' => '上傳圖片失敗',
35                 ];
36                 $this->ajaxReturn($rs);
37             }
38             break;
39         default:
40             exit();
41     }
42 }

注意:

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

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

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