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

背景

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

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

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

相关文章

基于RKNN的YOLOv5安卓Demo

1.简介 基于RKNPU2 SDK 1.6.0版的安卓YOLOv5演示应用程序&#xff0c;选择图片进行对象检测并显示识别结果。 GitHub源码地址&#xff1a;https://github.com/shiyinghan/rknn-android-yolov5 2.实现过程 参考RKNN官方库RKNN Model Zoo提供的YOLOv5对象检测demo&#xff0c…

【Web】CTFSHOW-2023CISCN国赛初赛刷题记录(全)

目录 Unzip BackendService go_session deserbug 主打一个精简 Unzip 进来先是一个文件上传界面 右键查看源码&#xff0c;actionupload.php 直接访问/upload.php&#xff0c;看到后端的源码 就是上传一个压缩包&#xff0c;对其进行解包处理 因为其是在/tmp下执行…

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…

Qt 中的项目文件解析和命名规范

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、Qt项目文件解析 1、.pro 文件解析 2、widget.h 文件解析 3、main.cpp 文件解析 4、widget.cpp…

Redis: 持久化

文章目录 一、RDB持久化1、概念2、生成、载入RDB文件3、执行时机&#xff08;1&#xff09; 执行save命令&#xff08;2&#xff09;执行bgsave命令&#xff08;3&#xff09;Redis停机时&#xff08;4&#xff09;触发RDB条件 4、bgsave原理5、小结 二、AOF持久化1、概念2、AO…

element vue 日期时间组件封装

一、背景 年、月、周、日的时间范围类型&#xff0c;选择对应的日期类型&#xff0c;会传参给后端一个dateType参数&#xff0c;用于后端判断&#xff0c;进行数据抽稀。 二、实现效果 三、代码 完整代码&#xff1a; //年月周日&#xff0c;组件封装 //vue3 setup <scrip…

JAVA毕业设计134—基于Java+Springboot+Vue的社区医院管理系统(源代码+数据库+万字论文)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootVue的社区医院管理系统(源代码数据库万字论文)134 一、系统介绍 本项目前后端分离&#xff0c;分为管理员、用户、医生、前台四种角色 1、用户&#xff1a; 注…

边缘计算采集网关如何助力制造企业解决数采问题-天拓四方

一、企业背景 某大型制造企业&#xff0c;位于国内某经济发达的工业园区内&#xff0c;拥有多个生产线和智能化设备&#xff0c;致力于提高生产效率、降低运营成本。随着企业规模的扩大和生产自动化的推进&#xff0c;该企业面临着海量数据处理、实时响应和网络安全等多重挑战…

Prompt最佳实践|大模型也喜欢角色扮演?

在OpenAI的官方文档中已经提供了Prompt Enginerring的最佳实践&#xff0c;目的就是帮助用户更好的使用ChatGPT 编写优秀的提示词我一共总结了9个分类&#xff0c;本文讲解第2个分类&#xff1a;要求模型扮演角色 提供更多的细节要求模型扮演角色使用分隔符指定任务步骤提供样…

Java Web这一路走来

大部分Java应用都是Web或网络应用&#xff0c;MVC框架在Java框架中有着举足轻重的地位&#xff0c;一开始的Web应用并不现在这样子的&#xff0c;一步一步走来&#xff0c;每一步都经历了无数的血和泪的教训&#xff0c;以史为镜可以知兴替。 1. 草莽时代 早期的Java服务端技…

Cortex-M4架构

第一章 嵌入式系统概论 1.1 嵌入式系统概念 用于控制、监视或者辅助操作机器和设备的装置&#xff0c;是一种专用计算机系统。 更宽泛的定义&#xff1a;是在产品内部&#xff0c;具有特定功能的计算机系统。 1.2 嵌入式系统组成 硬件 ①处理器&#xff1a;CPU ②存储器…

学习:面向云备份提供商的 Solidigm 固态硬盘

SSD与HDD的区别 SSD和HDD之间的主要区别在于它们如何存储和传输数据。HDD有一个旋转盘片或磁盘&#xff0c;用于读取和写入数据。HDD的每GB初始价格通常低于SSD&#xff0c;这使其成为大型机构&#xff08;如金融机构、政府数据存储设施、高性能计算中心&#xff08;HPC&#…