tp5 集成 layui富文本编辑器

最新推荐文章于 2025-06-11 14:13:14 发布

置顶 zz_lkw

最新推荐文章于 2025-06-11 14:13:14 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：后端开发

本文链接：https://blog.youkuaiyun.com/zz_lkw/article/details/80736448

后端开发专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何在ThinkPHP 5项目中整合LayUI富文本编辑器，并实现图片上传功能。包括LayUI文件结构说明、HTML配置、PHP后端处理逻辑等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一睹芳容

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

├─css //css目录

│ └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）

│ ├─laydate

│ ├─layer

│ │ └─default

│ └─layim

│ └─skin

├─font //字体图标目录

├─images //图片资源目录（一些表情等）

│ └─face

└─lay //JS目录

├─dest //经过合并的完整模块

└─modules //各模块/组件

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

3 html 部分（主要内容如下）

<link rel="stylesheet" href="/static/layui/css/layui.css">
 <script src="/static/layui/layui.js"></script>

<textarea id="demo" name="content" style="display: none;"></textarea>

<script>

layui.use('layedit', function(){
  var layedit = layui.layedit;
　　//上传图片接口：注意：layedit.set 一定要放在 build前面，否则配置全局接口将无效
    layedit.set({
        uploadImage: {
            url: '/admin/Article/lay_img_upload', //接口url
            type: 'post', //默认post
        }
    });
    //创建编辑器
    layedit.build('demo'),{
        width:600,
        height: 180 //设置编辑器高度
    }; //建立编辑器

});
</script>

　4 PHP部分：

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

 //控制器头部要引入
use  think\Request;   

 //layui编辑器图片上传接口
    public function lay_img_upload(){
        $file = Request::instance()->file('file');
        if(empty($file)){
            $result["code"] = "1";
            $result["msg"] = "请选择图片";
            $result['data']["src"] = '';
        }else{
            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/layui' );
            if($info){
                $name_path =str_replace('\\',"/",$info->getSaveName());
                //成功上传后 获取上传信息
                $result["code"] = '0';
                $result["msg"] = "上传成功";
                $result['data']["src"] = "/uploads/layui/".$name_path;
            }else{
                  // 上传失败获取错误信息
                $result["code"] = "2";
                $result["msg"] = "上传出错";
                $result['data']["src"] ='';
            }
        

        }

        return json_encode($result);
    }

//layui图片规定返回格式，，依据这个格式，做上面代码的相应返回处理

{
  "code": 0 //0表示成功，其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}

记得ajax获取不到值解决办法

var editIndex = layui.layedit.build('demo');

data.field.detail = layui.layedit.getContent(editIndex);