首页 > 代码库 > PHP Ueditor 富文本编辑器

PHP Ueditor 富文本编辑器

2024-08-26 12:27:29   220人阅读

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="http://www.mamicode.com/<?= STATICURL ?>web/ueditor/ueditor.config.js"></script> 7 <script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/<?= 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:"", //路径前缀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中的ueUploadImage22             $oss = new Upload();23             $url = $oss->up(‘ueUpfile‘, ‘ueditor‘); //ueUpfile 对应上个case中的ueUpfild24             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返回)

PHP Ueditor 富文本编辑器


联系
我们