当前位置: 首页 > news >正文

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图片上传

记录&#xff1a;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 控制台输入指令&#xff1a;pip install lxml 二、XPath的基础语法 XPath是一种在XML文档中查找信息的语言&#xff0c;可以使用它在HTM…...

【雅思写作】Vince9120雅思小作文笔记——P1 Intro(前言)

文章目录 链接P1 Intro&#xff08;前言&#xff09;字数限制题型综述&#xff08;problem types overview&#xff09;1. **柱状图&#xff08;Bar Chart&#xff09;** - 描述不同类别在某个或多个变量上的数据量比较。2. **线图&#xff08;Line Graph&#xff09;** - 展示…...

【面试干货】HTTPS 工作原理

【面试干货】HTTPS 工作原理 1、握手阶段&#xff08;Handshake&#xff09;2、密钥协商阶段3、加密通信阶段4、结束通信阶段 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff…...

Cocos Creator 中编码规范 (6)

Cocos中命名规范 创建文件夹&#xff0c;全小写。创建脚本&#xff0c;首字母大写的驼峰形式。创建变量&#xff0c;首字母小写的驼峰形式 官方的编码规范...

Vue3:menu导航栏出现多个同一跳转路径的菜单处理

文章目录 需求整理实现思路实现过程 需求整理&#xff0c;实现思路 最近公司想将之前老的项目整理出来&#xff0c;因为这个老项目内容太杂什么页面都往里面塞&#xff0c;导致菜单特别多&#xff0c;公司就像将这个老的项目迁出来&#xff0c;这个旧的项目本来是后端PHP写的。…...

SAM轻量化应用Auto-SAM、Group-Mix SAM、RAP-SAM、STLM

1. Auto SAM&#xff08;Auto-Prompting SAM for Mobile Friendly 3D Medical Image Segmentation&#xff09; 1.1 面临问题 医学背景&#xff1a; &#xff08;1&#xff09;与自然图像相比&#xff0c;医学图像的尺寸更小&#xff0c;形状不规则&#xff0c;对比度更低。&…...

深度优化搜索DFS使用详解,看这篇就够了!!!

深度优先搜索&#xff08;Depth-First Search&#xff0c;DFS&#xff09;是一种用于遍历或搜索树和图的算法。在最坏的情况下&#xff0c;深度优先搜索的性能为O(VE)&#xff0c;其中V是顶点数&#xff0c;E是边数。DFS常用于解决连通性问题、路径问题、生成树问题等。 ### D…...

Apache SeaTunnel 正式发布2.3.5版本,功能增强及多个Bug修复

经过两个月的筹备&#xff0c;我们在2.3.4版本基础上进行了新一轮的迭代&#xff0c;本次更新不仅修复了多个关键问题&#xff0c;还引入了若干重要功能增强和性能优化。 在此&#xff0c;我们先提前感谢社区成员的贡献和支持&#xff0c;如果你想升级最新的版本&#xff0c;快…...

interview_bak

flink内存管理 JVM 存在的几个问题: Java 对象存储密度低。一个只包含 boolean 属性的对象占用了16个字节内存:对象头占了8个,boolean 属性占了1个,对齐填充占了7个。而实际上只需要一个bit(1/8字节)就够了。Full GC 会极大地影响性能,尤其是为了处理更大数据而开了很大…...

layui 数据表格 自动定位新增行位置

由于数据表格新增行后没有到新增到当前位置 继续增加的需求&#xff1a; 因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 高亮颜色浅 可自行更改 整理了一下 可根据 情况 修改 // 初始化滚动条位置变量 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的核心组件如下&#xff1a; Channel回调Future事件和ChannelHander Channel channel是Java NIO的一个基本构造。可以把Channel看作是传入或传出数据的载体。它可以被打开或关闭&#xff0c;连接或断开连接。 回调 …...

代码审计平台sonarqube的安装及使用

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、使用sonarqube的目的四、sonarqube流程五、docker快速搭建sonarqube六、sonarqube scanner的安装和使用七、sonarqube对maven项目进行分析八、sonarqube分析报告解析九、代码扫描规则定制十…...

C++ 使用nlohmann/json.hpp库读写json字符串

1. json库 我个人比较喜欢 nlohmann/json.hpp 这个库&#xff0c;因为它只需要一个hpp文件即可&#xff0c;足够轻量&#xff01; 这是它的github地址。 2. 简单实例代码 #include <iostream> #include <json.hpp> #include <fstream> #include <stri…...

3GPP官网下载协议步骤

1.打开官网 https://www.3gpp.org/ 2.点击 3.在界面选择要找的series&#xff0c;跳转到查找界面 以V2X通信协议为例&#xff0c;论文中通常会看到许多应用&#xff1a; [7] “Study on evaluation methodology of new Vehicle-to-Everything (V2X) use cases for LTE and NR…...

【JAVA】Git 的基本概念和使用方式

Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。以下是Git的一些基本概念和使用方式的深入探讨&#xff1a; 基本概念 1. 仓库&#xff08;Repository&#xff09; 仓库是Git用来保存你的项目…...

C++多态实现原理详解

阅读引言&#xff1a; 我想象了一下&#xff0c; 假如人有突然问我什么是多态&#xff0c; 我该如何给别人说清楚呢&#xff1f;所以写下这篇文章&#xff0c; 希望大家看完有所收获。 ①. 开胃小菜 先看这样一个开胃小菜 这里我有点小小的疑惑&#xff0c; 大小为啥是1。 在C…...

[数据集][目标检测]交通灯检测数据集VOC+YOLO格式2600张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2600 标注数量(xml文件个数)&#xff1a;2600 标注数量(txt文件个数)&#xff1a;2600 标注…...

关于测试用例

目录 一 测试用例介绍 二 写用例的好处 三 不适合写用例的情况 一 测试用例介绍 测试用例由测试来写&#xff0c;编写时间在需求评审和设计评审&#xff08;如有&#xff09;结束后&#xff0c;需求提测前&#xff0c;用例依赖需求文档来编写。一般包含用例标题&#xff0c…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...