tp5 集成 layui 富文本 前后端（完整版）

有些东西，不会的时候，就是难；会了，也就这样；

没错，一步一个脚印，不懂弄到懂，是一个过程，不是仅有一个结果；如果仅有一个结果，那下次呢？

思考！并不会让我们失去什么，这会带给我们另一种人生！说多了......

1、html 代码（全）记得引入 JS和CSS 文件 ：

    
    
    
    
    
    
    



    

        标题
        

            
        
    
    

        摘要
        

            
        
    
    

        正文
        

            
        
    
    

        

            添加
            返回
        
    

2、tp5 后台：（这三个方法：页面、获取内容、图片异步上传）

 //编辑器 页面
    public function layEdit(){
        return $this -> fetch();
    }
//获取文本内容 打印
    public function layGet(){
        $da = \request() -> param();
        print_r($da);
        return '获取数据成功';
    }
    //layui 编辑器 图片上传接口
    public function imgUpload(){
        //$obj = new UploadFile();
        //$dirName = $this -> dirName();
        if(request()->isPost()) {
            //$files = $_FILES("file");
            $files = Request::instance()-> file("file");
            if (empty($files)) {
                $result["code"] = "1";
                $result["msg"] = "请选择图片";
                $result['data']["src"] = '';
            } else {
                //图片放在路径下：/public/upload/our/
                $info = $files->move(ROOT_PATH . 'public' . DS . 'upload/our' );
                if ($info) {
                    $name_path =str_replace('\\',"/",$info->getSaveName());
                   // $fileName = $obj->upload($files, $dirName);
                    //成功上传后 获取上传信息
                    $result["code"] = '0';
                    $result["msg"] = "上传成功";
                    $result['data']["src"] = '/public/upload/our/'.$name_path;
                } else {
                    // 上传失败获取错误信息
                    $result["code"] = "2";
                    $result["msg"] = "上传出错";
                    $result['data']["src"] = '';
                }
            }
            return json($result);
        }
        return false;
    }

3、route  =>  路由配置：

  'lenze/Our/layEdit', //页面显示
 'bg_get'           => 'lenze/Our/layGet', //内容添加
 'bg_img_upload'    => 'lenze/Our/imgUpload', //图片上传
]);

action="bg_get"  ->  内容接口

url: '/bg_img_upload',    ->  图片接口

4、效果：

提交前：

提交后：

5、感想：网上好多文章都是写上传图片的，上传内容的只是简单一过，layui 封装好的，开始的时候不知道怎么下手；记录下来方便你我！

参考资料：
富文本编辑器文档 - layui.layedit
​​​​​​​http://wemedia.ifeng.com/34880971/wemedia.shtml