提供各类模板的下载和定制,本句话可在后台更改!

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

创始人 2022-04-06 11:04:52 其他教程 0 0评论


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

效果图如下:

999

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文件夹放进去

效果如下图:

100

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(emptyempty($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": "图片名称" //可选
  }
}




打赏

分享到:

没有找到能解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线客服

  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
右下角

请注册

社交账号登录

请登录

社交账号登录

找回密码

社交账号登录