• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

PHP Ueditor 富文本编辑器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
PHP如何搭建百度Ueditor富文本编辑器发布时间:2022-07-10
下一篇:
百度富文本编辑器使用(PHP)发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap