html渲染的文字样式大小不统一解决方案

React Hooks 封装可粘贴图片的输入框组件(wangeditor)_react 支持图片拖拽的输入框-CSDN博客

这篇文章中的wangediter可粘贴图片的输入框,输入的文字和粘贴的文字在dangerouslySetInnerHTML渲染后出现了字体不统一的情况

在html中右键检查可以看到粘贴后的文字没有标签为文本节点#text,而在输入框中输入的则在p标签中 自然字体字号样式就不统一了

那么只要让#text也被p标签或者span标签包着 就可以自定义样式啦

我这里用的是找到某个类名下所有的文本节点#text,然后把文本节点替换为其父元素中的span元素,下面是方法:(含注释噢~适合中国宝宝体质阅读的代码片段!)

 function wrapTextNodesInSpanExcept(selector,excludeClass,spanClass = "wrapped-text") {const questionDetails = document.querySelectorAll(selector);function wrapTextNode(node, excludeAncestor) {if (node.nodeType === Node.TEXT_NODE &&/\S/.test(node.nodeValue) &&!excludeAncestor) {const span = document.createElement("span");span.className = spanClass; // 设置span的类名// 将文本节点的文本内容设置到span中span.textContent = node.nodeValue;// 替换文本节点为其父元素中的span元素node.parentNode.replaceChild(span, node);} else if (node.nodeType === Node.ELEMENT_NODE) {// 检查当前元素或其祖先是否有excludeClasslet exclude = false;for (let el = node;el && el !== document.body;el = el.parentElement) {if (el.classList.contains(excludeClass)) {exclude = true;break;}}// 递归处理元素节点的子节点Array.from(node.childNodes).forEach((childNode) => {wrapTextNode(childNode, exclude);});}}questionDetails.forEach((questionDetail) => {// 从question-detail元素开始递归,并传入false作为excludeAncestor的初始值Array.from(questionDetail.childNodes).forEach((childNode) => {wrapTextNode(childNode, false);});});}// 调用函数,为question-detail下的除了question-file类下的所有文本节点添加span标签wrapTextNodesInSpanExcept(".question-detail", "question-file");

加了一点额外的小处理就是后面发现我需要替换的是question-detail下的除了question-file类下的所有文本节点,如果不需要传空就ok,然后在样式中给这个类名或者span标签写样式就OK了!

结果展示:无论你粘贴 输入 插入怎么样输入的文字 在html页面渲染的文字都会被统一啦

此时我觉得在这个页面上 我约等于秦 shi huang(我瞎说的)

又周五啦!下周五过十八周岁的生日!永远18!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/856958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zerotier-one自建根服务器方法二

一、简介 zerotier-one免费账户有25设备的限制,如果自己的设备多了就需要付费。不过zerotier-one是开源软件,我们可以自己建立根服务器,不用付费速度还很快。 由于时间关系上一篇文章没有写完,今天继续。 二、准备工作 准备一…

postman测试接口使用

背景: 隔了一段时间没有用postman,有些忘记了,谨以此文来记录postman的使用,如有忘记就可以快速回忆 使用: 点击这个号,是创建接口页面 这里的复选框可供我们选择接口的rest方式 请求路径: …

什么是停车资产数字化运营管理?“AI空间管理”是什么意思?

停车资产数字化运营管理,由捷顺科技子公司捷顺智城率先创新性提出,其指的是一种以数字化技术和专业运营手段为基础的管理模式,旨在通过AI空间数字化、绿色低碳化、生态商业化、服务标准化等举措,降低企业成本、提升资产管理效率,并…

一站式实时数仓Hologres整体能力介绍

讲师:阿里云Hologres PD丁烨 一、产品定位 随着技术的进步,大数据正从规模化转向实时化处理。用户对传统的T1分析已不满足,期望获得更高时效性的计算和分析能力。例如实时大屏,城市大脑的交通监控、风控和实时的个性化推荐&…

mybatis框架相关问题总结(本地笔记搬运)

1、背景 2、运行启动问题 问题一 运行spring boot项目时报错:‘factoryBeanObjectType‘: java.lang.String 解决一 版本问题,springframework版本和mybatis/mybatis-plus版本不兼容。现spring-boot使用3.3.0版本,mybatis-plus使用3.5.7…

下班时间如何安排?

随着互联网的飞速发展和数字化时代的来临,越来越多的人开始探索除了主业以外的赚钱途径,以增加收入来源。本文将为您介绍几种当前热门的高薪副业项目,包括网络任务赚钱、开设个人网店、电商导购推广、在线辅导教学、技能变现服务、视频创作分…

ansys apdl如何将选中的节点储存到变量中

步骤如下: 1.使用 *GET 命令来获取选中节点的数量 *GET, numNodes, NODE, 0, COUNT这里,numNodes 是你用来存储节点数量的变量。 2.接着,使用 *DIM 命令来定义一个用于存储节点标签的数组 *DIM, nodeList, , numNodesnodeList 就是用来存储…

ROS程序设计系列 - 4.ROS Programming

ROS程序设计系列 - 4.ROS Programming 1. 源由2. 概念2.1 ROS services2.2 ROS actions2.3 ROS time2.4 ROS bags2.5 Debugging 3. 常见应用4. 示例4.1 运行4.2 代码 5. 视频课程 1. 源由 继续学习ROS编程,本章主要是一些基本组件和概念。并结合示例代码进行阐述。…

知识篇| 全面认识Git lfs

我们经常在使用hugging face上模型和数据集时候,如果要想模下载到本地,要使用git lfs 方式下载。 那么与git有什么关系?什么是git lfs? 现在最流行的代码管理工具就是git, Git 是业界流行的分布式版本控制工具,仓库与远端仓库同样保存了全量的文件和变更历史&am…

java:Multiple Bounds--类型变量(TypeVariable)定义的高级用法--<A extends ClassAIfAIfB >

做Java开发工作好多年了。今天偶然翻到 java.lang.TypeVariable的源码&#xff0c;好奇为什么 TypeVariable.getBounds()返回类型是个数组。 一般不都是<T extends Number> 这样用码&#xff1f;T难道还能extends多个类型&#xff1f; 同问&#xff1a;不应该是extend,为…

CSS-0_2 CSS和继承(inherit initial)

文章目录 CSS的层叠和继承inheritinitial很多你以为的样式初始值&#xff0c;其实是用户代理样式 碎碎念 CSS的层叠和继承 在上一篇 CSS和层叠、样式优先级 里已经讲过了层叠和优先级之间的关系&#xff0c;但是在CSS中的层叠除了体现在争抢露脸机会的优先级之外&#xff0c;还…

Python自动化(2)——键盘模拟

Python自动化(2)——键盘模拟 前台键盘模拟 前台键盘模拟和后台键盘模拟的区别在于&#xff0c;是否绑定窗口。即前台模拟是只模拟键盘操作&#xff0c;例如按下按键a&#xff0c;如果聚焦在一个文本文档的编辑区&#xff0c;那么就会把这个a输入进去。但如果是聚焦到了浏览器…

等保测评--第一级通用要求2

安全管理制度 管理 制 度 应建立日常管理活动中常用的安全管理制度 安全管理机构 岗位设置 应设立系统管理员等岗位,并定义各个工作岗位的职责 人员配备 应配备一定数量的系统管理员 授权和审批 应根据各个部门和岗位的职责明确授权审批事项、审批部门和批准人等 安全…

前端面试js高频手写大全

res.push(fn(arr[i])) } return res } 3. reduce实现数组的map方法 Array.prototype.myMap function(fn,thisValue){ var res []; thisValue thisValue||[]; this.reduce(function(pre,cur,index,arr){ return res.push(fn.call(thisValue,cur,index,arr)); },[])…

云计算考试题

Cloud ❀ 云计算-虚拟化常见的两种架构_裸金属架构和宿主型架构的区别-CSDN博客 为啥要成2 11 bcd 16 acd abcd BCD NAS为啥支持文件存储的协议 选BCD 什么是网络文件系统 选bcd 错题 选abc 选bcd 选 abd

Spring Cloud Gateway网关下的文档聚合(knife4j)

文章目录 引言I 服务发现自动聚合(discover)1.1 配置1.2 服务发现的路由聚合策略-数据来源1.3 编写动态路由实现类1.4 依赖II 其他2.1 网关动态加载swagger路由和配置2.2 无法处理 lb://URI,返回503错误。2.3 SpringBoot3 解决NoResourceFoundException: No static resource f…

让PG停摆一周的大会?2024 PGConf.dev 技术大盘点(下)

PGCon.Dev 的前身是 PGCon —— 最知名的 PostgreSQL Hacker 年度聚会&#xff0c;也可以说是决定 PostgreSQL 未来的会议。从 2007 年成立以来&#xff0c;一直都是在加拿大渥太华举办至今。 有多隆重呢&#xff1f;PG 核心组的 Peter Eisentraut 在会后做了一个统计&#xff…

建筑驱鸟设备 | 建筑专用超声波驱鸟器

从半夜的鸣叫到频繁的鸟粪污染&#xff0c;鸟类活动有时会成为城市居民不得不面对的小小困扰。通过合理的驱鸟方法&#xff0c;我们可以有效地减少鸟类对建筑物的侵扰&#xff0c;保护建筑物的完好和安全&#xff0c;同时维护城市居民的生活质量。 建筑专用超声波驱鸟器&#x…

PHP框架之ThinkPHP框架

ThinkPHP框架概述 ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的开源轻量级PHP框架。它诞生于2006年初&#xff0c;原名FCS&#xff0c;2007年元旦正式更名为ThinkPHP&#xff0c;遵循Apache2开源协议发布。ThinkPHP从Struts结构移植过来并做了改进和完善&#…

为什么伦敦金新手不能用一小时图及以下的时间周期?

刚进入伦敦金市场的投资者&#xff0c;一般不建议使用较低的时间周期&#xff0c;如1小时图或以下。不仅如此&#xff0c;新手或者兼职投资者会被要求使用较高的时间周期交易&#xff0c;如4小时图或日线图&#xff0c;这有什么道理呢&#xff1f;下面我们就来讨论一下。 新手的…