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'),{
        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": "圖片名稱" //可選
  }
}