TP5.1 +LayuiAdmin 富文本使用教程
挠头了一下午,终于解决了 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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?