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返回)
请发表评论