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

百度的简版富文本编辑器umeditor很久没更新了

全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主要说明图片上传怎么使用

HTML:

1 //承载编辑器

2

3

4

5 //加载js

6

7

8

9

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

注意: 第16行, 要写你的PHP代码可访问链接, ueditor会自动拼接相关的参数去指明要什么东西:

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

第二步: ueditor获取上一步返回的json配置信息后拼接上 ?action=xxx 再次请求进行图片上传

PHP代码(上传到了阿里云)

1 /**2 * 百度ueditor编辑器调用,3 * 对应js配置项为serverUrl4 */

5 public functionueUpload()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 = newUpload();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返回)