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

背景

前置条件:编辑器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 ,验证生效, 完美解决

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【任推邦新悟空网盘拉新】八款地推网推新项目,周期稳定,受众广!

现在地推网推新项目打得火热&#xff0c;尤其是夸克网盘&#xff0c;地推网推新流程其实很简单&#xff0c;简单来说就是就是给项目增加新用户&#xff0c;每邀请一个新用户注册&#xff0c;你就能得到收益&#xff0c;下面小推给大家整理了一份好推的项目&#xff0c;希望能够…

C++:类与对象(一)

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;类与对象&#xff08;一&#xff09;》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 面向对象和面向过程的区别1.类的引入2.…

【java面试题-Redis篇-2024】

##java面试题大全 详细面试题-持续更新中-点击跳转 点赞、收藏、加关注 java基础面试题 ##java面试题大全1、什么是 Redis2、Redis 的数据结构类型3、Redis 为什么快4、什么是跳跃表5、什么是 I/O 多路复用6、什么是缓存击穿、缓存穿透、缓存雪崩7、什么是布隆过滤器8、热…

webpack5如何关闭全屏错误

1、找到vue.config.js 2、在上面的devServer里面添加如下&#xff1a; client: {overlay: false, // 禁用全局错误提示},

写出好代码的底层逻辑

写出好代码的底层逻辑 程序员安身立命的手艺就是写代码&#xff0c;可多少人知道如何才能写出好的代码呢&#xff1f;这几年也做过很多次的代码 CR&#xff0c;可好代码的标准在哪里呢&#xff1f;我们在做 CR 的时候&#xff0c;其实只是停留在代码的表面&#xff0c;主要是跟…

Godot插值、贝塞尔曲线和Astar寻路

一、插值 线性插值是采用一次多项式上进行的插值计算&#xff0c;任意给定两个值A和B&#xff0c;那么在A和B之间的任意值可以定义为&#xff1a;P(t) A * (1 - t) B * t&#xff0c;0 < t < 1。 数学中用于线性拟合&#xff0c;游戏应用可以做出跟随效果&#xff08;…

keycloak - 鉴权VUE

目录 一、前言 1、背景 2、实验版本 二、开始干活 1、keycloak配置 a、创建领域(realms) b、创建客户端 c、创建用户、角色 2、vue代码 a、依赖 b、main.js 三、未解决的问题 目录 一、前言 1、背景 2、实验版本 二、开始干活 1、keycloak配置 a、创建领域(r…

VMware Esxi安装群辉系统

群晖的网络存储产品具有强大的操作系统&#xff0c;提供了各种应用程序和服务&#xff0c;包括文件共享、数据备份、多媒体管理、远程访问等。用户可以通过简单直观的界面来管理他们的存储设备&#xff0c;并且可以根据自己的需求扩展设备的功能。总的来说&#xff0c;群晖的产…

概念科普|大模型它到底是什么?

一、引言 ChatGPT、Open AI、大模型、提示词工程、Token、幻觉等人工智能的黑话&#xff0c;在2023年这个普通却又神奇的年份里&#xff0c;反复的冲刷着大家的认知。让一部分人彻底躺平的同时&#xff0c;让另外一部分人开始焦虑起来&#xff0c;生怕在这个人工智能的奇迹之年…

鸡乐盒网页版

前端时间鸡乐盒比较火&#xff0c;当时跟着做了一款鸡乐盒&#xff0c;同时拥有聊天以及音乐播放器功能 链接&#xff1a; 鸡乐盒https://www.jaron.top/app/xiana/pages/musicBox/musicBox

C语言---浮点数在内存中的存储

前面跟大家介绍了整数在内存中的存储&#xff0c;这次再向大家介绍下浮点数在内存中的存储。 我们常见的浮点数有3.14&#xff0c;1E10 等等&#xff0c;浮点数家族包括float&#xff0c;double&#xff0c;long double类型。 浮点数的表示范围在头文件 float.h 定义。 1.浮…

代码随想录算法训练营第二十九天(回溯5)|491. 非递减子序列、46. 全排列、47. 全排列 II(JAVA)

文章目录 491. 非递减子序列解题思路源码 46. 全排列解题思路源码 47. 全排列 II解题思路源码 总结 491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 …

探索未来游戏:生成式人工智能AI如何重塑你的游戏世界?

生成式人工智能&#xff08;Generative AI&#xff09;正以前所未有的速度改变着各行各业的运作模式。其中&#xff0c;游戏产业作为科技应用的前沿阵地&#xff0c;正经历着前所未有的变革。本文将探讨生成式人工智能如何重塑游戏产业&#xff0c;以及这一变革背后的深远影响。…

博士推荐 | 拥有超过10年的数据解决方案经验,数据驱动的决策者

编辑 / 木子 审核 / 朝阳 伟骅英才 伟骅英才致力于以大数据、区块链、AI人工智能等前沿技术打造开放的人力资本生态&#xff0c;用科技解决职业领域问题&#xff0c;提升行业数字化服务水平&#xff0c;提供创新型的产业与人才一体化服务的人力资源解决方案和示范平台&#x…

评估精益管理培训的有效性需要收集哪些数据?

近年来&#xff0c;企业纷纷寻求通过精益管理培训来提升效率和竞争力。然而&#xff0c;精益管理培训是否真正有效&#xff0c;能否为企业带来实实在在的改变&#xff0c;这是许多管理者和决策者关心的问题。为了回答这个问题&#xff0c;我们需要收集一系列关键数据来评估精益…

基于 OpenHarmony PrecentPositionLayout 开发指南

1. PrecentPositionLayout 功能介绍 1.1. 组件介绍&#xff1a; 鸿蒙 SDK 提供了不同布局规范的组件容器&#xff0c;例如以单一方向排列的 DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的 PositionLayout 等。 但是 PositionLayout 中组件的位置是…

基于单片机收音机调幅系统设计仿真源码

**单片机设计介绍&#xff0c;基于单片机收音机调幅系统设计仿真源码 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机收音机调幅系统设计的仿真源码&#xff0c;主要实现了通过单片机控制调幅收音机的核心功能。以下是…

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

题目&#xff1a; 题解&#xff1a; class Solution { public:int threeSumClosest(vector<int>& nums, int target) {sort(nums.begin(), nums.end());int n nums.size();int best 1e7;// 根据差值的绝对值来更新答案auto update [&](int cur) {if (abs(cur…

城市郊野公园“风筝节”视频智能识别技术安全监管方案

一、方案背景 四月天气十分舒适&#xff0c;微风拂面&#xff0c;这段时间也是游客前往户外放风筝的好时机&#xff0c;很多城市都举办了“风筝节”等活动&#xff0c;尤其是在周末节假日期间&#xff0c;城市各个郊野公园的游客量逐渐暴增。然而&#xff0c;随着参与人数的增…

C++ 十进制转十六进制

文章目录 toHexString(int n) 函数&#xff0c;输入整型数字n&#xff0c;返回 字符串string类。 #include <iostream> #include <string> #include <vector> #include <math.h> using namespace std;string toHexString(int n) {vector <int> …