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

基于ueditor编辑器的功能开发之重写ueditor的查找和替换功能,支持滚动定位

百度编辑器的查找和替换无法随着页面滚动定位,找到searchreplace.js,重写里面的方法

效果展示:

20250421173735

思路:

找到查找和替换的输入框,发现id名分别为findtxt和findtxt1,分别绑定change事件,并定义两套变量,分别为currentIndex 、matches和replacecurrentIndex、replacematches用于存储当前滚动到的数组位置和查找到的文本的位置的数组列表

点击下一个上一个按钮的的时候注释原来的代码,改为调用我们自己写的方法scrollToMatch,参数传递当前要定位的数组索引和类型(查找或者替换),代码如下

/*** Created with JetBrains PhpStorm.* User: xuheng* Date: 12-9-26* Time: 下午12:29* To change this template use File | Settings | File Templates.*///清空上次查选的痕迹
editor.firstForSR = 0;
editor.currentRangeForSR = null;
//给tab注册切换事件
/*** tab点击处理事件* @param tabHeads* @param tabBodys* @param obj*/
//相关搜索变量
//当前查找的变量
let currentIndex = -1; 
let matches = [];
// 当前替换的变量
let replacecurrentIndex = -1
let replacematches = []
// let highlightSpan = document.createElement('span');
// highlightSpan.style.backgroundColor = '#ff0000';
// highlightSpan.style.color = '#ffffff';
// let execFlag = false;
function clickHandler( tabHeads,tabBodys,obj ) {//head样式更改for ( var k = 0, len = tabHeads.length; k < len; k++ ) {tabHeads[k].className = "";}obj.className = "focus";//body显隐var tabSrc = obj.getAttribute( "tabSrc" );for ( var j = 0, length = tabBodys.length; j < length; j++ ) {var body = tabBodys[j],id = body.getAttribute( "id" );if ( id != tabSrc ) {body.style.zIndex = 1;} else {body.style.zIndex = 200;}}}/*** TAB切换* @param tabParentId  tab的父节点ID或者对象本身*/
function switchTab( tabParentId ) {var tabElements = $G( tabParentId ).children,tabHeads = tabElements[0].children,tabBodys = tabElements[1].children;for ( var i = 0, length = tabHeads.length; i < length; i++ ) {var head = tabHeads[i];if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );head.onclick = function () {clickHandler(tabHeads,tabBodys,this);}}
}
$G('searchtab').onmousedown = function(){$G('search-msg').innerHTML = '';$G('replace-msg').innerHTML = ''
}
//是否区分大小写
function getMatchCase(id) {return $G(id).checked ? true : false;
}
// 给输入框绑定change时间,用于变量初始化
$G('findtxt').onchange =function(e){console.log(e,'input输入框时间是否改变')currentIndex = -1; //当前matches = [];searchText('findtxt')
}
// 给替换绑定change事件
$G('findtxt1').onchange =function(e){console.log(e,'替换是否改变')replacecurrentIndex = -1; //当前replacematches = [];searchText('findtxt1')
}
//查找
$G("nextFindBtn").onclick = function (txt, dir, mcase) {var findtxt = $G("findtxt").value, obj;if (!findtxt) {return false;}if (matches.length === 0) return;currentIndex = (currentIndex + 1) % matches.length;scrollToMatch(currentIndex,'findtxt');// 自定义实现查找过程// this.searchText()// obj = {//     searchStr:findtxt,//     dir:1,//     casesensitive:getMatchCase("matchCase")// };// if (!frCommond(obj)) {//     var bk = editor.selection.getRange().createBookmark();//     $G('search-msg').innerHTML = lang.getEnd;//     editor.selection.getRange().moveToBookmark(bk).select();// }
};
$G("nextReplaceBtn").onclick = function (txt, dir, mcase) {var findtxt = $G("findtxt1").value, obj;if (!findtxt) {return false;}// obj = {//     searchStr:findtxt,//     dir:1,//     casesensitive:getMatchCase("matchCase1")// };// frCommond(obj);if (replacecurrentIndex.length === 0) return;replacecurrentIndex = (replacecurrentIndex + 1) % replacematches.length;scrollToMatch(replacecurrentIndex,'findtxt1');
};
$G("preFindBtn").onclick = function (txt, dir, mcase) {var findtxt = $G("findtxt").value, obj;if (!findtxt) {return false;}// obj = {//     searchStr:findtxt,//     dir:-1,//     casesensitive:getMatchCase("matchCase")// };// if (!frCommond(obj)) {//     $G('search-msg').innerHTML = lang.getStart;// }if (matches.length === 0) return;currentIndex = (currentIndex - 1 + matches.length) % matches.length;scrollToMatch(currentIndex,'findtxt');
};
$G("preReplaceBtn").onclick = function (txt, dir, mcase) {var findtxt = $G("findtxt1").value, obj;if (!findtxt) {return false;}// obj = {//     searchStr:findtxt,//     dir:-1,//     casesensitive:getMatchCase("matchCase1")// };// frCommond(obj);if (replacecurrentIndex.length === 0) return;replacecurrentIndex = (replacecurrentIndex - 1 + replacematches.length) % replacematches.length;scrollToMatch(replacecurrentIndex,'findtxt1');
};
//替换
$G("repalceBtn").onclick = function () {var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");if (!findtxt) {return false;}if (findtxt == replacetxt || (!getMatchCase("matchCase1") && findtxt.toLowerCase() == replacetxt.toLowerCase())) {return false;}obj = {searchStr:findtxt,dir:1,casesensitive:getMatchCase("matchCase1"),replaceStr:replacetxt};frCommond(obj);
};
//全部替换
$G("repalceAllBtn").onclick = function () {var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");if (!findtxt) {return false;}if (findtxt == replacetxt || (!getMatchCase("matchCase1") && findtxt.toLowerCase() == replacetxt.toLowerCase())) {return false;}obj = {searchStr:findtxt,casesensitive:getMatchCase("matchCase1"),replaceStr:replacetxt,all:true};var num = frCommond(obj);if (num) {$G('replace-msg').innerHTML = lang.countMsg.replace("{#count}", num);}
};
//执行
var frCommond = function (obj) {return editor.execCommand("searchreplace", obj);
};
function searchText(str) {let searchValue = $G(`${str}`).valueif (!searchValue) return;//获取编辑器内容//获取编辑器iframe文档对象const iframeDoc = editor.iframe.contentDocument;const body = iframeDoc.body;const textNodes = getTextNodes(body);//查找所有匹配项if(str == 'findtxt1'){replacematches = []} else {matches = []}textNodes.forEach(node => {const nodeText = node.nodeValue;const regex = new RegExp(`(${searchValue})`, 'gi');let match;while ((match = regex.exec(nodeText)) !== null) {if(str == 'findtxt1'){replacematches.push({node,offset: match.index,length: match[0].length})} else {matches.push({node,offset: match.index,length: match[0].length})}}});console.log(matches,replacematches,'matches')
}
//获取所有文本节点
function getTextNodes(node) {const textNodes = [];if (node.nodeType === Node.TEXT_NODE) {textNodes.push(node);} else {const children = node.childNodes;for (let i = 0; i < children.length; i++) {textNodes.push(...getTextNodes(children[i]));}}return textNodes;
}
//定位到指定匹配项
function scrollToMatch(index,str) {let flagif(str =='findtxt1'){if (replacematches.length === 0 || replacecurrentIndex < 0 || replacecurrentIndex >= replacematches.length){flag = true}} else if(str =='findtxt'){if (matches.length === 0 || currentIndex < 0 || currentIndex >= matches.length){flag = true}}if(flag) returnlet iframeDoc = editor.iframe.contentDocument;let selection = iframeDoc.getSelection();selection.removeAllRanges();let match = str == 'findtxt1' ?replacematches[index]:matches[index];let range = document.createRange();range.setStart(match.node, match.offset);range.setEnd(match.node, match.offset + match.length);selection.addRange(range);// range.surroundContents(highlightSpan);// editor.fireEvent('selectionchange');let rect = range.getBoundingClientRect();// let iframeWindow = editor.iframe.contentWindow;// let body = iframeWindow.document.querySelector('body');//计算滚动位置let scrollTop = rect.top + editor.document.documentElement.scrollTop - 30;editor.document.documentElement.scrollTo({top: scrollTop,behavior: "smooth"});
}
switchTab("searchtab");

相关文章:

基于ueditor编辑器的功能开发之重写ueditor的查找和替换功能,支持滚动定位

百度编辑器的查找和替换无法随着页面滚动定位&#xff0c;找到searchreplace.js&#xff0c;重写里面的方法 效果展示&#xff1a; 20250421173735 思路&#xff1a; 找到查找和替换的输入框&#xff0c;发现id名分别为findtxt和findtxt1&#xff0c;分别绑定change事件&…...

分布式数据库TiDB:架构、核心特性与生产实践(分库分表)

在云计算与大数据时代&#xff0c;传统单机数据库面临三大挑战&#xff1a;海量数据存储、高并发访问和实时分析需求。MySQL分库分表方案复杂、NoSQL缺乏ACID支持、MPP数仓难以处理OLTP... 在这样的背景下&#xff0c;TiDB应运而生。作为一款开源的分布式NewSQL数据库&#xff…...

用自然语言指令构建机器学习可视化编程流程:InstructPipe 的创新探索

想要掌握如何将大模型的力量发挥到极致吗&#xff1f;叶梓老师带您深入了解 Llama Factory —— 一款革命性的大模型微调工具&#xff08;限时免费&#xff09;。 1小时实战课程&#xff0c;您将学习到如何轻松上手并有效利用 Llama Factory 来微调您的模型&#xff0c;以发挥其…...

利用WSL2的镜像功能访问Windows下的所有网卡

目录 引言 镜像功能 如何设置 自动代理 结语 引言 我通常用PC上的LAN口去连接开发板&#xff0c;但是在WSL2中要访问LAN口连接的开发板有点麻烦。WSL2默认的网络模式为NAT&#xff0c;如果要访问Windows中网口需要设置桥接&#xff0c;比较繁琐。今天尝试了一下Windows 1…...

AI助理iOS开发:Copilot for Xcode 下载与安装全指南

引言 借助 Copilot for Xcode 也有两年了&#xff0c;如今已经变成了日常开发中的“默契搭档”。它能根据上下文补全代码&#xff0c;快速生成常用逻辑&#xff0c;甚至有时候在我还在思考怎么写的时候&#xff0c;它就已经给出了不错的建议。特别是在写一些重复性较高的代码&…...

Hadoop+Spark 笔记 2025/4/21

定义 1. 大数据&#xff08;Big Data&#xff09; - 指传统数据处理工具难以处理的海量、高速、多样的数据集合&#xff0c;通常具备3V特性&#xff08;Volume体量大、Velocity速度快、Variety多样性&#xff09;。扩展后还包括Veracity&#xff08;真实性&#xff09;和Va…...

模拟车辆变道 python 可视化

目录 车头朝向一起变化 车头朝向不变化,矩形框 车头朝向一起变化 import cv2 import numpy as npdef world_to_pixel(world_x, world_y, img_w=800, img_h=800):scale_x = img_w / 120 # 横向范围:0~120米scale_y = img_h / 80 # 纵向范围:0~80米pixel_x = int(world_x …...

国产仪器进化论:“鲁般号”基于无人机的天线测试系统

2025年4月14日&#xff0c;成都玖锦科技有限公司正式发布了新品&#xff1a;“鲁般号会飞的系统”系列&#xff0c;这是玖锦科技首款基于无人机的天线方向图测试系统。 在“振兴民族产业&#xff0c;打造民族品牌”的征途中&#xff0c;“鲁般号”系列是继“墨子”、“孔明”、…...

Linux学习笔记协议篇(六):SPI FLASH设备驱动

目录 一、设备树解析 二、SPI设备驱动代码分析 1、spi_nor_probe 2、spi_nor_scan &#xff08;1&#xff09;协议配置 &#xff08;2&#xff09;初始化Flash参数(核心步骤) &#xff08;3&#xff09;MTD子系统集成 &#xff08;3&#xff09;配置 SPI 通信参数 spi…...

Spring Boot 核心模块全解析:12 个模块详解及作用说明

在当今的微服务与云原生时代&#xff0c;Spring Boot 已成为构建现代 Java 应用的事实标准。它通过“约定优于配置”的理念&#xff0c;大大降低了 Spring 应用的开发门槛&#xff0c;帮助开发者快速启动和部署独立的、生产级别的项目。 本篇文章将系统梳理 Spring Boot 框架中…...

【无人机】无人机方向的设置,PX4飞控方向,QGC中设置飞控的方向/旋转角度。PX4使用手册飞行控制器/传感器方向

目录 #1、基本概念&#xff1a;计算方向 #2、详细步骤&#xff1a;设置方向 #3、微调 默认情况下&#xff0c;飞行控制器&#xff08;和外部指南针&#xff0c;如果有&#xff09;应放置在框架顶部朝上&#xff0c;方向应使箭头指向飞机前部。 如果板或外部指南针安装在任何…...

【Spring Boot基础】MyBatis的基础操作:日志、增删查改、列名和属性名匹配 -- 注解实现

MyBatis的基础操作 1.打印日志2. 参数传递2.1不传参2.2 固定参数 3. 增(Insert)3.1 用对象接参3.2 用param注解接收参数3.3 返回主键 4. 删(Delete)4.1 用Integer接参4.2 用对象接参 5. 改(Update)6. 查(Select)6.1 查6.2 拼接SQL语句6.3 列名和属性名匹配6.3.1 起别名 as6.3.2…...

泰迪智能科技大模型应用平台功能特色优势

1.平台概述 大模型应用平台是一款专为高校在大模型应用场景下的教学和科研需求设计的知识库问答系统。平台具备便捷性&#xff0c;支持上传常见格式的数据文件&#xff0c;如txt、doc、pdf、md等&#xff0c;并提供简洁明了的操作配置界面&#xff0c;使用户能够轻松搭建和训练…...

【NLP 69、KG - BERT】

人们总是在无能为力的时候喜欢说顺其自然 —— 25.4.21 一、KG-BERT&#xff1a;基于BERT的知识图谱补全模型 1.模型结构与设计 Ⅰ、核心思想&#xff1a; 将知识图谱中的三元组&#xff08;头实体-关系-尾实体&#xff09;转化为文本序列&#xff0c;利用BERT的上下文理解能…...

Spring解决循环依赖

Spring 通过 三级缓存机制 解决循环依赖问题&#xff0c;其核心思想是 提前暴露未完全初始化的 Bean&#xff0c;允许依赖方在 Bean 完全初始化前引用其早期版本。以下是详细解析&#xff1a; 一、三级缓存机制 Spring 在单例 Bean 的创建过程中维护了三级缓存&#xff0c;用于…...

深入解析 Spring 中的 @Value 注解(含源码级剖析 + 自定义实现)

深入解析 Spring 中的 Value 注解&#xff08;含源码级剖析 自定义实现&#xff09; 在 Spring 开发中&#xff0c;我们经常使用 Value 注解将配置文件中的值注入到 Bean 的属性中。本文将深入探讨 Value 的使用方式、默认值支持、底层原理以及自定义实现方式。 一、Value 的…...

【Flink SQL实战】 UTC 时区格式的 ISO 时间转东八区时间

文章目录 一、原始数据格式二、解决方案三、其他要求 在实际开发中&#xff0c;我们常常会遇到此类情况&#xff1a;数据源里的时间格式是类似 2025-04-21T09:23:16.025Z 这种带 TimeZone 标识的 ISO 8601 格式&#xff0c;而我们需要在 Flink SQL 中将其转换成北京时间显示。 …...

【论文阅读23】-地下水预测-TCN-LSTM-Attention(2024-11)

这篇论文主要围绕利用深度学习模型检测地下水位异常以识别地震前兆展开。 [1] Chen X, Yang L, Liao X, et al. Groundwater level prediction and earthquake precursor anomaly analysis based on TCN-LSTM-attention network[J]. IEEE Access, 2024, 12: 176696-176718. 期刊…...

/proc/sys/vm/下各参数含义

/proc/sys/vm/下各参数含义 admin_reserve_kbytes如何计算最小有效预留&#xff1f; compact_memorycompaction_proactivenesscompact_unevictable_alloweddirty_background_bytesdirty_background_ratiodirty_bytesdirty_expire_centisecsdirty_ratiodirtytime_expire_seconds…...

算法分析与设计——动态规划复习题(待更新

检测题&#xff1a; 组合优化问题的目标函数通常不包括以下哪种形式&#xff1f; A. 需最小化的代价函数 B. 需最大化的回报函数 C. 需满足的硬约束条件 D. 需最小化的能量函数 答案&#xff1a;C 关于约束条件的说法&#xff0c;以下哪项是正确的&#xff1f; A. 硬约束可以通…...

【EasyPan】项目常见问题解答(自用持续更新中…)

EasyPan 网盘项目介绍 一、项目概述 EasyPan 是一个基于 Vue3 SpringBoot 的网盘系统&#xff0c;支持文件存储、在线预览、分享协作及后台管理&#xff0c;技术栈涵盖主流前后端框架及中间件&#xff08;MySQL、Redis、FFmpeg&#xff09;。 二、核心功能模块 用户认证 注册…...

基于Java的不固定长度字符集在指定宽度和自适应模型下图片绘制生成实战

目录 前言 一、需求介绍 1、指定宽度生成 2、指定列自适应生成 二、Java生成实现 1、公共方法 2、指定宽度生成 3、指定列自适应生成 三、总结 前言 在当今数字化与信息化飞速发展的时代&#xff0c;图像的生成与处理技术正日益成为众多领域关注的焦点。从创意设计到数…...

电子电器架构 ---软件定义汽车的电子/电气(E/E)架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 周末洗了一个澡,换了一身衣服,出了门却不知道去哪儿,不知道去找谁,漫无目的走着,大概这就是成年人最深的孤独吧! 旧人不知我近况,新人不知我过…...

Stable Diffusion 制作角色三视图

对于漫画创作&#xff0c;DPM 2M Karras和UniPC是高效且稳定的首选采样方法&#xff0c;结合Karras噪声调度可显著提升画面质量。若需进一步优化&#xff0c;可参考具体场景调整步数并辅以ControlNet等工具。避免使用随机性强的采样器&#xff08;如Euler a&#xff09;&#x…...

C++--负载均衡在线OJ

这是本人写的第二个项目&#xff0c;相比第一个代码量更少一些&#xff0c;但是此项目涉及linux中的内容更多&#xff0c;同样是干货满满&#xff0c;实现了 类似 leetcode 的题⽬列表在线编程功能&#xff0c;地址仓库&#xff1a;xwy/C学习项目 1. 所用技术与开发环境 C11和…...

【数字图像处理】彩色图像处理(1)

研究彩色图像处理的原因 1&#xff1a;利用颜色信息&#xff0c;可以简化目标物的区分&#xff0c;以及从场景中提取出目标物 2&#xff1a;人眼对颜色非常敏感&#xff0c;可以分辨出来几千种颜色色调和亮度&#xff0c;却只能分别出几十种灰度 彩色图像分类 伪彩色图像处理&…...

【Easylive】consumes = MediaType.MULTIPART_FORM_DATA_VALUE 与 @RequestPart

【Easylive】项目常见问题解答&#xff08;自用&持续更新中…&#xff09; 汇总版 consumes MediaType.MULTIPART_FORM_DATA_VALUE 的作用 1. 定义请求的数据格式 • 作用&#xff1a;告诉 Feign 和 HTTP 客户端&#xff0c;这个接口 接收的是 multipart/form-data 格式的…...

【python】copy deepcopy 赋值= 对比

上结论 写法是否独立是否安全修改copy() &#xff08;用于一维列表&#xff09;✅ 是独立副本✅ 安全deepcopy() &#xff08;多层结构时用&#xff09;✅ 是完全副本✅ 安全直接赋值&#xff08;&#xff09;❌ 是引用❌ 改一个会影响另一个 一、.copy() 和 deepcopy() 有什…...

环形缓冲区容量耗尽解决方案

以下是针对环形缓冲区在时间窗口统计场景中容量耗尽问题的解决方案设计及优劣分析&#xff0c;结合搜索结果中的技术原理和工程实践&#xff1a; 一、核心问题定位 当环形缓冲区容量耗尽时&#xff0c;新数据覆盖旧数据会导致&#xff1a; 时间窗口统计失真&#xff1a;无法准…...

蓝桥杯 17.发现环

发现环 原题目链接 题目描述 小明的实验室有 N 台电脑&#xff0c;编号 1 ⋯ N。 原本这 N 台电脑之间有 N−1 条数据链接相连&#xff0c;恰好构成一个树形网络。 在树形网络上&#xff0c;任意两台电脑之间有唯一的路径相连。 不过在最近一次维护网络时&#xff0c;管理…...

数据库服务器架构

ORM ORM&#xff08;Object Relational Mapping&#xff09;&#xff1a;对象与关系数据之间的映射 映射关系表&#xff1a; 类&#xff08;class&#xff09;—— 数据库的表&#xff08;table&#xff09; 对象&#xff08;object&#xff09;——记录&#xff08;record…...

Netty前置基础知识之BIO、NIO以及AIO理论详细解析和实战案例

前言 Netty是什么&#xff1f; Netty 是一个基于 Java 的 ​高性能异步事件驱动网络应用框架&#xff0c;主要用于快速开发可维护的协议服务器和客户端。它简化了网络编程的复杂性&#xff0c;特别适合构建需要处理海量并发连接、低延迟和高吞吐量的分布式系统。 1)Netty 是…...

职坐标IT培训:人工智能职业跃迁路径

随着人工智能时代全面来临&#xff0c;职业发展格局正经历颠覆性重构。政策端&#xff0c;《新一代人工智能发展规划》与《生成式AI服务管理办法》双轨并行&#xff0c;既为行业注入动能&#xff0c;也划定了技术应用的合规边界。在此背景下&#xff0c;从业者需构建覆盖基础理…...

Redis 的单线程模型对微服务意味着什么?需要注意哪些潜在瓶颈?

Redis 的单线程模型是其高性能的关键因素之一&#xff0c;但这在微服务场景下既是优势&#xff0c;也可能带来潜在的瓶颈。理解这一点有助于我们在微服务架构中更好的使用Redis。 Redis 单线程模型的核心&#xff1a; 命令处理是单线程的: Redis 使用了一个主线程来接收客户端…...

Redis 有序集合(Sorted Set)

Redis 有序集合&#xff08;Sorted Set&#xff09; 以下从基础命令、内部编码和使用场景三个维度对 Redis 有序集合进行详细解析&#xff1a; 一、基础命令 命令时间复杂度命令含义zadd key score member [score member …] O ( k l o g ( n ) ) O(klog(n)) O(klog(n))&…...

C语言中联合体(Union)和结构体(Struct)的嵌套用法

联合体和结构体是C语言中两种重要的复合数据类型&#xff0c;它们可以相互嵌套使用&#xff0c;为复杂数据的表示提供了灵活的方式。 1. 联合体(Union)基础 联合体是一种特殊的数据类型&#xff0c;允许在相同的内存位置存储不同的数据类型。联合体的所有成员共享同一块内存空…...

Rust: 从内存地址信息看内存布局

内存布局其实有几个&#xff1a;address&#xff08;地址&#xff09;、size&#xff08;大小&#xff09;、alignment&#xff08;对齐位数&#xff0c;2 的自然数次幂&#xff0c;2&#xff0c;4&#xff0c;8…&#xff09;。 今天主要从address来看内存的布局。 下面以Str…...

分类算法中one-vs-rest策略和one-vs-one 策略的区别是什么?

LGBMClassifier 参数中&#xff0c;常使用objective: 这个参数定义了模型的目标函数。 而对于多分类问题&#xff0c;通常使用 multiclass 或者 multiclassova。multiclass 表示 one-vs-rest 策略&#xff0c;而 multiclassova 则是 one-vs-one 策略。 在机器学习领域&#x…...

新能源汽车充电桩运营模式的发展与优化路径探析

摘要&#xff1a;以民用新能源汽车充电桩为研究对象&#xff0c;在分析政府主导型、电网企业主导型及汽车厂商主导型三种运营模式特点的基础上&#xff0c;结合我国新能源汽车发展现状&#xff0c;提出汽车厂商与电网企业协同共建的联盟模式。通过构建涵盖政府补贴、建设成本与…...

【前端样式】用 aspect-ratio 实现等比容器:视频封面与图片占位的终极解决方案

在网页开发中&#xff0c;处理视频封面、图片卡片等需要固定比例的容器一直是前端工程师的必修课。本文将以 aspect-ratio 属性为核心&#xff0c;深入探讨如何优雅实现等比容器&#xff0c;并通过完整代码示例和常见问题解析&#xff0c;助你彻底掌握这一现代布局利器。 目录…...

redis常用的五种数据类型

redis常用的五种数据类型 文档 redis单机安装redis数据类型-位图bitmap 说明 官网操作命令指南页面&#xff1a;https://redis.io/docs/latest/commands/?nameget&groupstring 常用命令 keys *&#xff1a;查看所有键exists k1 k2&#xff1a;键存在个数type k1&…...

Cribl 利用表向event 中插入相应的字段-example-02

Working with Lookups – Example 2 ​ Let’s assume we have the following lookup file, and given both the fields impact and priority in an event, we would like to add a corresponding ingestion-time field called severity. cisco_sourcefire_severity.csv im…...

SystemWeaver详解:从入门到精通的深度实战指南

SystemWeaver详解&#xff1a;从入门到精通的深度实战指南 文章目录 SystemWeaver详解&#xff1a;从入门到精通的深度实战指南一、SystemWeaver环境搭建与基础配置1.1 多平台安装全流程 二、新手必学的十大核心操作2.1 项目创建全流程2.2 建模工具箱深度解析 三、需求工程与系…...

归一化对C4.5决策树无效的数学原理与实证分析

一、引言 在机器学习的预处理流程中&#xff0c;归一化&#xff08;Normalization&#xff09;常被视作提升模型性能的"银弹"。然而&#xff0c;这一经验法则在决策树算法中却遭遇挑战——尤其对基于信息增益比的C4.5算法&#xff0c;归一化操作几乎不产生任何效果。…...

# 05_Elastic Stack 从入门到实践(五)

05_Elastic Stack 从入门到实践(五) 一、Elasticsearch集群之分布式文档(文档的写操作、搜索操作) 1、文档的写操作 1)新建、索引和删除请求都是写(write)操作,它们必须在主分片上成功完成才能复制到相关的复制分片上。 2)下面我们罗列在主分片和复制分片上成功新建、…...

n8n 中文系列教程_05.如何在本机部署/安装 n8n(详细图文教程)

n8n 是一款强大的开源工作流自动化工具&#xff0c;可帮助你连接各类应用与服务&#xff0c;实现自动化任务。如果你想快速体验 n8n 的功能&#xff0c;本机部署是最简单的方式。本教程将手把手指导你在 Windows 或 MacOS 上通过 Docker 轻松安装和运行 n8n&#xff0c;无需服务…...

Spark,从0开始配置Spark的local模式

1.启动虚拟机 2.通过finalshell连接虚拟机&#xff0c;并上传安装文件到 /opt/software下 3.解压spark安装文件到/opt/module下 tar -zxvf spark-3.3.1-bin-hadoop3.tgz -C /opt/module/ 4.重命名&#xff0c;把解压后的文件夹改成spark-local。因为后续我们还会使用其他的配置…...

策略模式:优雅应对多变的业务需求

一、策略模式基础概念 策略模式&#xff08;Strategy Pattern&#xff09; 是一种行为型设计模式&#xff0c;它通过定义一系列可互换的算法族&#xff0c;并将每个算法封装成独立的策略类&#xff0c;使得算法可以独立于使用它的客户端变化。策略模式的核心思想是 “将算法的…...

性能比拼: Nginx vs Apache

本内容是对知名性能评测博主 Anton Putra Nginx vs Apache Performance 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 引言 在本视频中&#xff0c;我们将比较 Nginx 与 Apache 这两个 Web 服务器。我们将进行多项测试&#xff0c;并且实际上&#xff0c;在某些情…...

(7)NodeJS的使用与NPM包管理器

本系列教程目录&#xff1a;Vue3Element Plus全套学习笔记-目录大纲 文章目录 第1章 NodeJS1.1 NodeJS简介1.2 NodeJS下载1.3 Node基础入门1.3.1 控制台输出1.3.2 使用函数 1.4 NodeJS模块化编程1.5 NodeJS内置模块1.5.1 fs模块1.5.2 http模块 1.6 NPM包管理工具1.6.1 修改npm镜…...