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返回)

轉載于:https://www.cnblogs.com/iLoveMyD/p/6159031.html

總結

以上是生活随笔為你收集整理的PHP Ueditor 富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。