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

2019-11-26 13:33:04  阅读 33 次 评论 0 条

编辑器地址: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. }


本文地址:http://daiguohui.com/post/10.html
版权声明:本文为原创文章,版权归 daiguohui 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?