tp5 整合 layui富文字編輯器
阿新 • • 發佈:2019-01-31
一睹芳容
1 去官網:http://www.layui.com/ 下載layui
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
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": "圖片名稱" //可選
}
}