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

百度的簡(jiǎn)版富文本編輯器umeditor很久沒(méi)更新了

全功能版本的配置項(xiàng)跟umeditor還是有區(qū)別的, 這里說(shuō)下ueditor怎么對(duì)接到項(xiàng)目中去, 主要說(shuō)明圖片上傳怎么使用

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 //實(shí)例化編輯器 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前綴, 如果服務(wù)端返回的圖片地址中有http://...那這里就留空, 此項(xiàng)必須有
18 }); 19 </script>

注意: 第16行, 要寫(xiě)你的PHP代碼可訪(fǎng)問(wèn)鏈接, ueditor會(huì)自動(dòng)拼接相關(guān)的參數(shù)去指明要什么東西:

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

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

?

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

1 /** 2 * 百度ueditor編輯器調(diào)用, 3 * 對(duì)應(yīng)js配置項(xiàng)為serverUrl 4 */ 5 public function ueUpload() 6 { 7 $arg = I('get.action'); 8 switch ($arg) { 9 case 'config': 10 exit('{ 11 /* 上傳圖片配置項(xiàng) */ 12 "imageActionName": "ueUploadImage", /* 執(zhí)行上傳圖片的action名稱(chēng) */ 13 "imageFieldName": "ueUpfile", /* 提交的圖片表單名稱(chēng) */ 14 "imageMaxSize": 2048000, /* 上傳大小限制，單位B */ 15 "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */ 16 "imageCompressEnable": true, /* 是否壓縮圖片,默認(rèn)是true */ 17 /* 截圖工具上傳 */ 18 "snapscreenActionName": "ueUploadImage", /* 執(zhí)行上傳截圖的action名稱(chēng) */ 19 }'); 20 break; 21 case 'ueUploadImage': //這個(gè)值對(duì)應(yīng)上個(gè)case中的ueUploadImage 22 $oss = new Upload(); 23 $url = $oss->up('ueUpfile', 'ueditor'); //ueUpfile 對(duì)應(yīng)上個(gè)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行的配置是對(duì)應(yīng)的, 第13行的值就是上傳的$_FILES中的表單名字

2. 注意25~30行, 是上傳成功后的返回結(jié)構(gòu)(轉(zhuǎn)為json返回)

3. 注意33~35行, 是上傳失敗后的返回結(jié)構(gòu)(轉(zhuǎn)為json返回)

轉(zhuǎn)載于:https://www.cnblogs.com/iLoveMyD/p/6159031.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。