tp5 集成 layui富文本编辑器

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

一睹芳容

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'),{
        600,
        height: 180 //设置编辑器高度
    }; //建立编辑器

});
</script>

 4 PHP部分: 

//内容接收
$content
= input('content');
 //控制器头部要引入
use  thinkRequest; 

//
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": "图片名称" //可选 } }
原文地址:https://www.cnblogs.com/richerdyoung/p/6529168.html