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": "图片名称" //可选 } }
  • 相关阅读:
    v​s​快​捷​键
    sequelize 基本操作
    服务器重启,自动重启httpd
    svn使用方法以及使用教程
    非常全的VsCode快捷键
    原生JS forEach()和map()遍历的区别以及兼容写法
    JS中 map, filter, some, every, forEach, for in, for of 用法总结
    map的使用
    Window和Mac下端口占用情况及处理方式
    vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/6529168.html
Copyright © 2011-2022 走看看