thinkphp5 集成 layui 富文本编辑器 教程

编辑器地址:http://www.layui.com/doc/modules/layedit.html

 

效果图如下:layui 富文本编辑器

 

1、 去官网:http://www.layui.com/     下载layui

结构如下:

  1. ├─css //css目录
  2.   │  └─modules //模块css目录(一般如果模块相对较大,我们会单独提取)
  3.   │      ├─laydate
  4.   │      ├─layer
  5.   │      │  └─default
  6.   │      └─layim
  7.   │          └─skin
  8.   ├─font  //字体图标目录
  9.   ├─images //图片资源目录(一些表情等)
  10.   │  └─face
  11.   └─lay //JS目录
  12.       ├─dest //经过合并的完整模块
  13.       └─modules //各模块/组件

 

2、 找到tp5 项目目录: 根目录/public/static/         把下载的layui文件夹放进去

效果如下图:把下载的layui文件夹放根目录/public/static/ 去

 

3、 html 部分(主要内容如以下代码)

  1. <link rel="stylesheet" href="/static/layui/css/layui.css">
  2.  <script src="/static/layui/layui.js"></script>
  3. <textarea id="demo" name="content" style="display: none;"></textarea>
  4. <script>
  5. layui.use('layedit', function(){
  6. var layedit = layui.layedit;
  7. //上传图片接口:注意:layedit.set 一定要放在 build前面,否则配置全局接口将无效
  8.     layedit.set({
  9.         uploadImage: {
  10.             url: '/admin/Article/lay_img_upload', //接口url
  11.             type: 'post', //默认post
  12.         }
  13.     });
  14. //创建编辑器
  15.     layedit.build('demo'),{
  16.         width:600,
  17.         height: 180 //设置编辑器高度
  18.     }; //建立编辑器
  19. });
  20. </script>

 

4、PHP部分代码如下:

  1. //内容接收
  2. $content = input('content');

 

  1. //控制器头部要引入
  2. use  think\Request;
  3. //layui编辑器图片上传接口
  4. public function lay_img_upload(){
  5. $file = Request::instance()->file('file');
  6. if(emptyempty($file)){
  7. $result["code"] = "1";
  8. $result["msg"] = "请选择图片";
  9. $result['data']["src"] = '';
  10.         }else{
  11. // 移动到框架应用根目录/public/uploads/ 目录下
  12. $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/layui' );
  13. if($info){
  14. $name_path =str_replace('\\',"/",$info->getSaveName());
  15. //成功上传后 获取上传信息
  16. $result["code"] = '0';
  17. $result["msg"] = "上传成功";
  18. $result['data']["src"] = "/uploads/layui/".$name_path;
  19.             }else{
  20. // 上传失败获取错误信息
  21. $result["code"] = "2";
  22. $result["msg"] = "上传出错";
  23. $result['data']["src"] ='';
  24.             }
  25.         }
  26. return json_encode($result);
  27.     }

 

  1. //layui图片规定返回格式,,依据这个格式,做上面代码的相应返回处理
  2. {
  3.   "code": 0 //0表示成功,其它失败
  4.   ,"msg""" //提示信息 //一般上传失败后返回
  5.   ,"data": {
  6.     "src""图片路径"
  7.     ,"title""图片名称" //可选
  8.   }
  9. }
    A+
发布日期:2017年05月06日 16:04:36  所属分类:ThinkPHP框架
最后更新时间:2019-12-26 15:03:57
评分: (当前没有评级)
付杰
C++基础入门到进阶视频教程
  • ¥ 498.0元
  • 市场价:498.0元
前端工程化构建工具:Babel7+Webpack4
  • ¥ 15元
  • 市场价:15元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 99.9元
  • 市场价:299元
数据库基础篇:SQLServer+MySQL+HeidiSQL
  • ¥ 189.0元
  • 市场价:269.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0

  1. 头像 无药可救 0

    layui编辑器看上去很不错,不知道跟百度编辑器比起来,哪个更好用点?