撓頭了一下午，終于解決了 layui富文本的圖片問題！?

第一個方面 視圖模板body 里面這么寫：

<form class="layui-form" id="form_1" action=""><div class="layui-form-item layui-form-text"><textarea class="layui-textarea" placeholder="請輸內容" name="content" lay-verify="content"id="lay_edit" style="border: 2px;" ></textarea></div><div class="layui-form-item"><button class="layui-btn" lay-submit="" lay-filter="editor">提交保存<button></div></form>

JS里面這么寫：

{block name="js"} <script src="__layuiadmin__/layui/layui.js" charset="utf-8"></script> <script>var layedit = layui.layedit;// var index= layedit.build('demo',{// });// var content = layedit.getContent(index); //獲取html//編輯器layui.use(['layedit','form'], function(){var layedit = layui.layedit;var form = layui.form;var up_url="{:url('md')}";layedit.set({//暴露layupload參數設置接口 --詳細查看layupload參數說明uploadImage: {url:up_url //接口url,type: 'post' //默認post,accept: 'image', acceptMime: 'image/*',exts: 'jpg|png|gif|bmp|jpeg', size: '10240'}, devmode: true//插入代碼設置, codeConfig: {hide: true, //是否顯示編碼語言選擇框default: 'javascript' //hide為true時的默認語言格式}, tool: ['strong' //加粗,'italic' //斜體,'underline' //下劃線,'del' //刪除線,'|' //分割線,'left' //左對齊,'center' //居中對齊,'right' //右對齊,'link' //超鏈接,'unlink' //清除鏈接,'face' //表情,'image' //插入圖片,'help' //幫助],height: 300, //設置編輯器高度});var index = layedit.build('lay_edit',{height: 300, //設置編輯器高度}); //建立編輯器//提交時把值同步到文本域中form.verify({//content富文本域中的lay-verify值content: function(value) {return layedit.sync(index);}});}); </script>{/block}

最重要的就是后臺這么寫：

　　

public function md(){ $request = new Request();//Request::instance()$file = $request->file('file');if(empty($file)){$result["code"] = "1";$result["msg"] = "請選擇圖片";$result['data']["src"] = '';}else{// 移動到框架應用根目錄/public/uploads/layui$info = $file->move('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);}

至此 點擊上傳圖片 圖片正常顯示 ：

總結

以上是生活随笔為你收集整理的TP5.1 +LayuiAdmin 富文本使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。