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

前端| 富文本显示不全的解决方法

news 2026/5/12 3:09:51

背景

前置条件：编辑器wangEditor vue项目
在pc端进行了富文本操作， 将word内容复制到编辑器中， 进行发布， pc端正常， 在手机端展示的时候 显示不全

分析

根据h5端编辑器内容的数据展示， 看到有一些样式造成的， <table style="margin-left: -51.3pt; border: none; border-collapse: collapse;">
由于偏移了51.3pt， 造成了不可见；但是这些内容是富文本内容， 是用户侧造成的， 用户测数据千变万化， 不可能一样对应去修改，该如何解决呢

想到一个问题： 为什么pc端能正常显示呢， 如果存在偏移，那么pc端显示也会偏移啊， 马上去pc端查看样式验证， 结果发现它默认的样式确实和上面一样， 但是css样式规则表示 margin-left: -51.3pt 未生效，生效的是另外一个样式

在这里插入图片描述
这个index.vue是什么文件呢， 于是点开看看， 发现这个文件已经对编辑器的一些样式做了优化， 我完全可以把这些样式放到手机端去

解决

  • 构造同样的层级关系
<div class='editor' ><div class="w-e-text-container"><div class="w-e-text" >
  • 将样式拷贝过来，验证
  • 由于富文本是从后台读取的， 使用了domPropsInnerHTML， 使用了它之后， 下面样式editor .w-e-text > table 不生效; 解决方式是前面加一个deep /deep/ .editor .w-e-text>table ，验证生效， 完美解决

相关文章：

前端| 富文本显示不全的解决方法

背景 前置条件&#xff1a;编辑器wangEditor vue项目 在pc端进行了富文本操作&#xff0c; 将word内容复制到编辑器中&#xff0c; 进行发布&#xff0c; pc端正常&#xff0c; 在手机端展示的时候 显示不全 分析 根据h5端编辑器内容的数据展示&#xff0c; 看到有一些样式造…...

编程日记 2024/4/8 9:58:25

数据结构——链表

目录 一、链表 1、单向链表 单向链表的遍历方式&#xff1a; 2、循环链表 3、双向链表 二、自行车停放&#xff08;双向链表&#xff09; 一、链表 链表是由许多相同数据类型的数据项按特定顺序排列而成的线性表特性&#xff1a;存放的位置是不连续且随机的&#xff0c;动…...

编程日记 2024/4/8 9:57:24

uniapp使用vuex

1、uniapp中使用vuex_uniapp使用vuex-CSDN博客 2、uniapp中使用vuex(store)模块的例子 - 简书 (jianshu.com) 3、vuex介绍及使用指南&#xff08;面向实战&#xff09;_vuex 实战应用-CSDN博客...

编程日记 2024/4/8 9:54:20

C++从入门到精通——this指针

this指针 前言一、this指针的引出问题 二、this指针的特性三、例题什么时候会出现编译报错什么时候会出现运行崩溃this指针存在哪里this指针可以为空吗 四、C语言和C实现Stack的对比C语言实现C实现 前言 this指针是一个特殊的指针&#xff0c;在C类的成员函数中使用。它指向调…...

编程日记 2024/4/8 9:52:17

Hive3.0.0建库表命令测试

Hive创建表格格式如下&#xff1a; create [external] table [if not exists] table_name [(col_name data_type [comment col_comment],)] [comment table_comment] [partitioned by(col_name data_type [comment col_comment],)] [clustered by (col_name,col_name,...)…...

编程日记 2024/4/8 9:47:13

一起学习python——基础篇（7）

今天讲一下python的函数。 函数是什么&#xff1f;函数是一段独立的代码块&#xff0c;这块代码是为了实现一些功能&#xff0c;而这个代码块只有在被调用时才能运行。 在 Python 中&#xff0c;使用 def 关键字定义函数&#xff1a; 函数的固定结构就是 def(关键字)函数名字…...

编程日记 2024/4/8 9:46:11

【LeetCode热题100】74. 搜索二维矩阵（二分）

一.题目要求 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;…...

编程日记 2024/4/8 9:45:09

Android OkHttp

目录 1.build.gradle 2.基本使用 3.POST请求 4.Builder构建者 1.build.gradle implementation("com.squareup.okhttp3:okhttp:4.12.0") 2.基本使用 GET同步请求 public void getSync(View view) {new Thread(){Overridepublic void run() {Request request …...

编程日记 2024/4/8 9:44:08

Java常用API_正则表达式_字符串的替换和截取方法——小练习

我将通过一个练习题来展示这两个方法 练习题&#xff1a; 有一段字符串&#xff1a;小张qwertyuiop123小李asdfghjkl456小王 要求1&#xff1a;把字符串中三个姓名之间的字母替换成vs 要求2&#xff1a;把字符串中的三个姓名切割出来 编写代码&#xff1a; public class Tes…...

编程日记 2024/4/8 9:42:06

从头开发一个RISC-V的操作系统(四)嵌入式开发介绍

文章目录 前提嵌入式开发交叉编译GDB调试&#xff0c;QEMU&#xff0c;MAKEFILE练习 目标&#xff1a;通过这一个系列课程的学习&#xff0c;开发出一个简易的在RISC-V指令集架构上运行的操作系统。 前提 这个系列的大部分文章和知识来自于&#xff1a;[完结] 循序渐进&#x…...

编程日记 2024/4/8 9:41:05

Web漏洞-文件上传常见验证

后缀名&#xff1a;类型&#xff0c;文件头等 后缀名&#xff1a;黑白名单 文件类型&#xff1a;MIME信息 文件头&#xff1a;内容头信息 常见黑名单&#xff08;明确不允许上传的格式后缀&#xff09;&#xff1a;asp、php、jsp、aspx、cgi、war &#xff08;如果没有完整…...

编程日记 2024/4/8 9:38:01

如何在 Node.js 中使用 bcrypt 对密码进行哈希处理

在网页开发领域中&#xff0c;安全性至关重要&#xff0c;特别是涉及到用户凭据如密码时。在网页开发中至关重要的一个安全程序是密码哈希处理。 密码哈希处理确保明文密码在数据库受到攻击时也难以被攻击者找到。但并非所有的哈希方法都是一样的&#xff0c;这就是 bcrypt 突…...

编程日记 2024/4/8 9:34:57

嵌入式学习49-单片机2

指令周期 1M 机器周期 12M &#xff08;晶体震荡器产生&#xff09; 中断两种方式 …...

编程日记 2024/4/8 9:33:56

汽车EDI：如何与奔驰建立EDI连接？

梅赛德斯-奔驰是世界闻名的豪华汽车品牌&#xff0c;无论是技术实力还是历史底蕴都在全球汽车主机厂中居于领先位置。奔驰拥有多种车型&#xff0c;多元化的产品布局不仅满足了不同用户画像的需求&#xff0c;也对其供应链体系有着极大的考验。 本文将为大家介绍梅赛德斯-奔驰乘…...

编程日记 2024/4/8 9:29:52

性能分析--内存知识

内存相关知识 计算机中与CPU进行数据交换的桥梁。内存的速度&#xff0c;比CPU的速度要慢很多。比磁盘速度要快很多。内存中存放数据&#xff0c;一旦断电就会消失。linux系统的 /proc路径下的文件&#xff0c;都是内存文件。内存大小&#xff0c;一般 是GB为单位。 现在都操作…...

编程日记 2024/4/8 9:28:50

目标检测标签分配策略，难样本挖掘策略

在目标检测任务中&#xff0c;样本的划分对于模型的性能具有至关重要的影响。其中&#xff0c;正样本指的是包含目标物体的图像或区域&#xff0c;而负样本则是不包含目标物体的图像或区域。然而&#xff0c;在负样本中&#xff0c;有一部分样本由于其与正样本在特征上的相似性…...

编程日记 2024/4/8 9:25:46

Java | Leetcode Java题解之第16题最接近的三数之和

题目&#xff1a; 题解&#xff1a; class Solution {public int threeSumClosest(int[] nums, int target) {Arrays.sort(nums);int n nums.length;int best 10000000;// 枚举 afor (int i 0; i < n; i) {// 保证和上一次枚举的元素不相等if (i > 0 && nums…...

编程日记 2024/4/8 9:23:44

FIN和RST的区别，几种TCP连接出现RST的情况

一、RST跟FIN的区别&#xff1a; 正常关闭连接的时候发的包是FIN&#xff0c;但是如果是异常关闭连接&#xff0c;则发送RST包 两者的区别在于&#xff1a; 1.RST不必等缓冲区的包都发出去&#xff0c;直接就丢弃缓存区的包发送RST包。而FIN需要先处理完缓存区的包才能发送F…...

编程日记 2024/4/8 9:22:42

2024/4/1—力扣—删除字符使频率相同

代码实现&#xff1a; 思路&#xff1a; 步骤一&#xff1a;统计各字母出现频率 步骤二&#xff1a;频率从高到低排序&#xff0c;形成频率数组 步骤三&#xff1a;频率数组只有如下组合符合要求&#xff1a; 1, 0...0n 1, n...n (, 0)n...n, 1(, 0) bool equalFrequency(char…...

编程日记 2024/4/8 9:21:41

Spring源码解析-容器基本实现

spring源码解析 整体架构 defaultListableBeanFactory xmlBeanDefinitionReader 创建XmlBeanFactory 对资源文件进行加载–Resource 利用LoadBeandefinitions(resource)方法加载配置中的bean loadBeandefinitions加载步骤 doLoadBeanDefinition xml配置模式 validationMode 获…...

编程日记 2024/4/8 9:15:34

基于MCP的AI智能体：自动化与优化亚马逊DSP广告实战指南

1. 项目概述&#xff1a;用AI智能体管理亚马逊DSP广告如果你正在寻找一种更高效、更智能的方式来管理亚马逊需求方平台&#xff08;Amazon DSP&#xff09;的广告活动&#xff0c;那么这个项目可能就是为你准备的。作为一个在程序化广告领域摸爬滚打了十多年的从业者&#xff0…...

编程新知 2026/5/12 2:36:49

基于Ansible Playbook的Kubernetes集群自动化部署实践

1. 项目概述&#xff1a;一个为Kubernetes集群部署而生的自动化剧本如果你和我一样&#xff0c;长期在运维和DevOps一线摸爬滚打&#xff0c;那么对Kubernetes集群的初始化部署一定又爱又恨。爱的是它带来的强大编排能力&#xff0c;恨的是那套繁琐、易错、文档分散的kubeadm i…...

编程新知 2026/5/12 1:48:23

暗黑破坏神2存档编辑器：游戏数据解析与自定义编辑的技术实现

暗黑破坏神2存档编辑器&#xff1a;游戏数据解析与自定义编辑的技术实现 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 在游戏开发与修改社区中&#xff0c;暗黑破坏神2&#xff08;Diablo II&#xff09;作为经典ARPG游戏&…...

编程新知 2026/5/12 0:22:05

保姆级教程：彻底解决CondaHTTPError网络连接失败（附.condarc文件完整配置流程）

深度解析CondaHTTPError&#xff1a;从网络诊断到.condarc文件全配置指南 遇到CondaHTTPError: HTTP 000 CONNECTION FAILED错误时&#xff0c;很多开发者会感到束手无策。这个问题通常出现在国内网络环境下&#xff0c;尤其是公司内网、校园网或使用某些代理服务后。本文将带你…...

编程新知 2026/5/12 0:19:46

HS2-HF Patch：一站式解决HoneySelect2汉化、去和谐与MOD管理难题

HS2-HF Patch&#xff1a;一站式解决HoneySelect2汉化、去和谐与MOD管理难题 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 如果你正在玩HoneySelect2这款游戏…...

编程新知 2026/5/12 0:14:58

【PTA实战】矩阵乘法：从输入格式到核心算法的完整解析

1. 矩阵乘法在PTA平台的核心挑战 第一次在PTA平台做矩阵乘法题时&#xff0c;我被那个"格式卡顿"坑得差点怀疑人生。明明算法逻辑完全正确&#xff0c;提交后却总是提示"格式错误"&#xff0c;这种经历相信很多同学都遇到过。矩阵乘法作为线性代数的基础运…...

编程新知 2026/5/11 22:39:32

别再只复制粘贴了！深入理解阿里云IoT设备三元组（ProductKey/DeviceName/DeviceSecret）的安全与应用

阿里云IoT设备三元组安全实践指南&#xff1a;从基础认知到高级防护策略 在物联网项目开发中&#xff0c;设备身份认证是保障系统安全的第一道防线。许多开发者虽然能够快速完成设备接入&#xff0c;但对认证核心——设备三元组&#xff08;ProductKey/DeviceName/DeviceSecret…...

编程新知 2026/5/11 22:16:39

【STM32H7实战】HRTIM高分辨率定时器在数字电源与电机控制中的高级应用与HAL库配置

1. HRTIM高分辨率定时器概述 HRTIM&#xff08;High-Resolution Timer&#xff09;是STM32H7系列中一个强大的定时器外设&#xff0c;专为数字电源转换、电机控制等高性能实时控制场景设计。相比普通定时器&#xff0c;它的分辨率高达184ps&#xff08;在400MHz主频下&#xff…...

编程新知 2026/5/11 20:02:28

如果你的消费观和价值观不一致，就会产生“花钱买后悔“的内耗：你的钱花对了吗？

消费观与价值观 目录 消费观与价值观 一、核心定义与层级关系 1. 价值观：人生的"底层操作系统" 2. 消费观：价值观在金钱领域的"应用程序" 二、底层原理逻辑：从进化到社会 1. 价值观的形成原理：三重塑造 2. 消费观的运行原理：价值兑换模型 3. 为什么会…...

编程新知 2026/5/11 19:16:29

如何实现一个延迟队列？

1. 基于 Sorted Set (ZSet) 的实现 这是最轻量级、最原生的 Redis 延迟队列实现方式。 核心思想&#xff1a;利用 ZSet 可以根据 score 进行排序的特性。我们将任务的预期执行时间戳作为 score&#xff0c;任务的具体内容&#xff08;或任务 ID&#xff09;作为 member。 生产…...

编程新知 2026/5/11 19:09:37