wangEditor富文本编辑器与layui图片上传
记录:js 显示默认的wangEditor富文本编辑器内容和图片
<style>body {background-color: #ffffff;}.layui-form-select dl{z-index:100000;}
</style>
<div class="layui-form layuimini-form"><div class="layui-form-item"><label class="layui-form-label">人员</label><div class="layui-input-inline"><select name="uid" lay-verify="required" lay-search="" id="uid" lay-filter="user"><option value="">请选择人员</option>{volist name="sh_user_data" id="vo"}<option value="{$vo.id}">{$vo.username}</option>{/volist}</select></div></div><div class="layui-form-item"><label class="layui-form-label">上传照片</label><div class="layui-upload"><input type="hidden" name="thumbnail" value="" id="thumbnail"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" src="" style="margin-left: 150px;max-width:120px;" id="demo1" name="img"><p id="demoText"></p></div></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">人员详情</label><div class="layui-input-block"><div id="editor" name="abstract"></div></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button></div></div>
</div>
<script src="__ADMINLIB__/wangEditor/wangEditor.js" charset="utf-8"></script>
<script src="__ADMINLIB__/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript">var E = window.wangEditor// 创建编辑器var editor = new E('#editor')// 关闭粘贴样式的过滤editor.customConfig.pasteFilterStyle = false// 忽略粘贴内容中的图片editor.customConfig.pasteIgnoreImg = false// 插入网络图片的回调editor.customConfig.linkImgCallback = function (url) {console.log(url) // url 即插入图片的地址}// 用户点击富文本区域会触发onfocus函数执行。editor.customConfig.onfocus = function () {console.log("进入回调")}// 用户离开富文本进行回调。editor.customConfig.onblur = function (html) {console.log('离开回调')}// 上传图片地址// editor.customConfig.uploadFileName = 'yourFileName'editor.customConfig.uploadImgServer = "{:url('admin/gift/wangeditorImg')}" // 上传图片到服务器// 限制一次最多上传 5 张图片editor.customConfig.uploadImgMaxLength = 5// 将图片大小限制为 3Meditor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024editor.customConfig.uploadImgHooks = {customInsert: function (insertImg, result, editor) {var url =result.data.url;//获取后台返回的urlinsertImg(url);}};editor.create()
</script>
<script>layui.use(['form', 'upload', 'laydate'], function () {var form = layui.form,layer = layui.layer,upload = layui.upload;laydate = layui.laydate;$ = layui.$;// 监听选择人员form.on('select(user)', function(data){layer.load(1);//加载中var uid=data.value;$.ajax({url: "{:url('admin/floor/get_user_info')}",type: 'POST',async: true,data: {uid:uid},success: function (datas) {if(datas.status == 0){layer.msg(datas.msg);return false;}// 显示照片$('input[name=thumbnail]').val(datas.data.img);$('img.layui-upload-img').attr('src',datas.data.img);// 显示介绍if(datas.data.abstract){editor.txt.html(datas.data.abstract);}else{editor.txt.html('');}form.render();layer.closeAll('loading');}});});//监听提交form.on('submit(saveBtn)', function (data) {// data = data.field;var uid = $("#uid").val();if(uid == ""){alert("请选择用户");return false;}var img = $("#thumbnail").val();var abstract = editor.txt.html();$.post("{:url('admin/floor/addinfook')}", {uid:uid,img:img,abstract:abstract}, function (res) {if (res.code == 1) {layer.alert(res.msg, {icon: 6, title: '添加提示'}, function () {var iframeIndex = parent.layer.getFrameIndex(window.name);parent.layer.close(iframeIndex);});} else {layer.alert(res.msg, {icon: 7, title: '添加提示'}, function () {var iframeIndex = parent.layer.getFrameIndex(window.name);parent.layer.close(iframeIndex);});}})return false;});//普通图片上传var uploadInst = upload.render({elem: '#test1', url: "{:url('admin/banner/upload')}" //改成您自己的上传接口, before: function (obj) {//预读本地文件示例,不支持ie8obj.preview(function (index, file, result) {$('#demo1').attr('height', '100px'); //图片链接(base64)$('#demo1').attr('width', '100px'); //图片链接(base64)$('#demo1').attr('src', result); //图片链接(base64)});}, done: function (res) {if (res.code == 1) {var src = res.data.img;$("input[name='thumbnail']").attr('value', src)return layer.msg(res.msg);}else{$('input[name=thumbnail]').val('');$('img.layui-upload-img').attr('src','');return layer.msg(res.msg);}}, error: function () {//演示失败状态,并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});});
</script>
可以用 editor.txt.html() 获取 html内容 这里获取到的是 html代码 这一块是没有样式的 需引入样式 样式可参考官网
可以用 editor.txt.text() 获取 text内容 这里获取到的是文字内容
php代码(tp5)
public function addinfook(){$uid = input('post.uid');$save = [];// $this->error('修改失败'.input('post.img'));if(input('post.img')){$save['img'] = input('post.img');if(strpos($save['img'], "https://xcxs.yxzyhz.com") === false){$save['img'] = "https://xcxs.yxzyhz.com".$save['img'];}}if(input('post.abstract')){$save['abstract'] = input('post.abstract');}if($save){$rest = DB::name("user")->where("id = {$uid}")->update($save);if ($rest !== false) {$this->success('修改成功', 'house');} else {$this->error('修改失败');} }else{$this->error('未修改内容');}}public function get_user_info(){$uid = input('uid');$floor_user = DB::name("user")->where("id = '{$uid}'")->field("id,abstract,img")->find();if(!$floor_user){return json(['status'=>0,'msg'=>'未找到此人员信息','data'=>'',]);}return json(['status'=>1,'msg'=>'','data'=>$floor_user,]);}// 文件上传方法public function upload(){// 获取表单上传文件 例如上传了001.jpg$file = request()->file('file');$info = $file->validate(['size' => 9999999999, 'ext' => 'jpg,png,gif,pdf,jpeg'])->move('./uploads');if ($info) {// 成功上传后 获取上传信息$data['img'] = '/aixin/public/uploads/' . $info->getSaveName();$data['img'] = str_replace('\\', '/', $data['img']);$this->success('success', '', $data);} else {$this->error($file->getError());}}
图示

相关文章:
wangEditor富文本编辑器与layui图片上传
记录:js 显示默认的wangEditor富文本编辑器内容和图片 <style>body {background-color: #ffffff;}.layui-form-select dl{z-index:100000;} </style> <div class"layui-form layuimini-form"><div class"layui-form-item"…...
爬虫学习:XPath提取网页数据
目录 一、安装XPath 二、XPath的基础语法 1.选取节点 三、使用XPath匹配数据 1.浏览器审查元素 2.具体实例 四、总结 一、安装XPath 控制台输入指令:pip install lxml 二、XPath的基础语法 XPath是一种在XML文档中查找信息的语言,可以使用它在HTM…...
【雅思写作】Vince9120雅思小作文笔记——P1 Intro(前言)
文章目录 链接P1 Intro(前言)字数限制题型综述(problem types overview)1. **柱状图(Bar Chart)** - 描述不同类别在某个或多个变量上的数据量比较。2. **线图(Line Graph)** - 展示…...
【面试干货】HTTPS 工作原理
【面试干货】HTTPS 工作原理 1、握手阶段(Handshake)2、密钥协商阶段3、加密通信阶段4、结束通信阶段 💖The Begin💖点点关注,收藏不迷路💖 HTTPS(HyperText Transfer Protocol Secureÿ…...
Cocos Creator 中编码规范 (6)
Cocos中命名规范 创建文件夹,全小写。创建脚本,首字母大写的驼峰形式。创建变量,首字母小写的驼峰形式 官方的编码规范...
Vue3:menu导航栏出现多个同一跳转路径的菜单处理
文章目录 需求整理实现思路实现过程 需求整理,实现思路 最近公司想将之前老的项目整理出来,因为这个老项目内容太杂什么页面都往里面塞,导致菜单特别多,公司就像将这个老的项目迁出来,这个旧的项目本来是后端PHP写的。…...
SAM轻量化应用Auto-SAM、Group-Mix SAM、RAP-SAM、STLM
1. Auto SAM(Auto-Prompting SAM for Mobile Friendly 3D Medical Image Segmentation) 1.1 面临问题 医学背景: (1)与自然图像相比,医学图像的尺寸更小,形状不规则,对比度更低。&…...
深度优化搜索DFS使用详解,看这篇就够了!!!
深度优先搜索(Depth-First Search,DFS)是一种用于遍历或搜索树和图的算法。在最坏的情况下,深度优先搜索的性能为O(VE),其中V是顶点数,E是边数。DFS常用于解决连通性问题、路径问题、生成树问题等。 ### D…...
Apache SeaTunnel 正式发布2.3.5版本,功能增强及多个Bug修复
经过两个月的筹备,我们在2.3.4版本基础上进行了新一轮的迭代,本次更新不仅修复了多个关键问题,还引入了若干重要功能增强和性能优化。 在此,我们先提前感谢社区成员的贡献和支持,如果你想升级最新的版本,快…...
interview_bak
flink内存管理 JVM 存在的几个问题: Java 对象存储密度低。一个只包含 boolean 属性的对象占用了16个字节内存:对象头占了8个,boolean 属性占了1个,对齐填充占了7个。而实际上只需要一个bit(1/8字节)就够了。Full GC 会极大地影响性能,尤其是为了处理更大数据而开了很大…...
layui 数据表格 自动定位新增行位置
由于数据表格新增行后没有到新增到当前位置 继续增加的需求: 因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 高亮颜色浅 可自行更改 整理了一下 可根据 情况 修改 // 初始化滚动条位置变量 let tableScroll {scrollTob: 0,scrollLeft: 0,…...
window10下安装ubuntu系统以及docker使用
window10下安装ubuntu系统以及docker使用 1. 启用适用于Linux的Windwos子系统2.下载Linux内核更新包3.将 WSL 2 设置为默认版本4.安装Ubuntu<br />直接去Microsoft store里面直接搜索Ubuntu进行安装。5.可能出现的问题1.win10启动ubuntu报错 参考的对象类型不支持尝试的操…...
Netty核心组件介绍
Netty是一款用于创建高性能网络应用程序的高级框架。Netty的核心组件如下: Channel回调Future事件和ChannelHander Channel channel是Java NIO的一个基本构造。可以把Channel看作是传入或传出数据的载体。它可以被打开或关闭,连接或断开连接。 回调 …...
代码审计平台sonarqube的安装及使用
docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、使用sonarqube的目的四、sonarqube流程五、docker快速搭建sonarqube六、sonarqube scanner的安装和使用七、sonarqube对maven项目进行分析八、sonarqube分析报告解析九、代码扫描规则定制十…...
C++ 使用nlohmann/json.hpp库读写json字符串
1. json库 我个人比较喜欢 nlohmann/json.hpp 这个库,因为它只需要一个hpp文件即可,足够轻量! 这是它的github地址。 2. 简单实例代码 #include <iostream> #include <json.hpp> #include <fstream> #include <stri…...
3GPP官网下载协议步骤
1.打开官网 https://www.3gpp.org/ 2.点击 3.在界面选择要找的series,跳转到查找界面 以V2X通信协议为例,论文中通常会看到许多应用: [7] “Study on evaluation methodology of new Vehicle-to-Everything (V2X) use cases for LTE and NR…...
【JAVA】Git 的基本概念和使用方式
Git是一个开源的分布式版本控制系统,由Linus Torvalds创建,用于有效、高速地处理从小到大的项目版本管理。以下是Git的一些基本概念和使用方式的深入探讨: 基本概念 1. 仓库(Repository) 仓库是Git用来保存你的项目…...
C++多态实现原理详解
阅读引言: 我想象了一下, 假如人有突然问我什么是多态, 我该如何给别人说清楚呢?所以写下这篇文章, 希望大家看完有所收获。 ①. 开胃小菜 先看这样一个开胃小菜 这里我有点小小的疑惑, 大小为啥是1。 在C…...
[数据集][目标检测]交通灯检测数据集VOC+YOLO格式2600张1类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2600 标注数量(xml文件个数):2600 标注数量(txt文件个数):2600 标注…...
关于测试用例
目录 一 测试用例介绍 二 写用例的好处 三 不适合写用例的情况 一 测试用例介绍 测试用例由测试来写,编写时间在需求评审和设计评审(如有)结束后,需求提测前,用例依赖需求文档来编写。一般包含用例标题,…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
uniapp 小程序 学习(一)
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 :开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置,将微信开发者工具放入到Hbuilder中, 打开后出现 如下 bug 解…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
