zoukankan      html  css  js  c++  java
  • 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": "图片名称" //可选 } }
  • 相关阅读:
    错位排序
    不容易系列之(4)——考新郎
    大数乘法
    神、上帝以及老天爷(错位排序)
    学生成绩……
    蛇形矩阵
    topcoder
    进制转换
    问题 1011
    topcoder 针对C程序员的TopCoder C++ (快速掌握)_ixigua—仅有杀毒软件是不够的…… .
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/6529168.html
Copyright © 2011-2022 走看看