深圳企业网站制作公司,西宁做网站公司排名,呼叫中心系统价格,福建网站建设服务背景
前置条件#xff1a;编辑器wangEditor vue项目 在pc端进行了富文本操作#xff0c; 将word内容复制到编辑器中#xff0c; 进行发布#xff0c; pc端正常#xff0c; 在手机端展示的时候 显示不全
分析
根据h5端编辑器内容的数据展示#xff0c; 看到有一些样式造…背景
前置条件编辑器wangEditor vue项目 在pc端进行了富文本操作 将word内容复制到编辑器中 进行发布 pc端正常 在手机端展示的时候 显示不全
分析
根据h5端编辑器内容的数据展示 看到有一些样式造成的 table stylemargin-left: -51.3pt; border: none; border-collapse: collapse; 由于偏移了51.3pt 造成了不可见但是这些内容是富文本内容 是用户侧造成的 用户测数据千变万化 不可能一样对应去修改该如何解决呢
想到一个问题 为什么pc端能正常显示呢 如果存在偏移那么pc端显示也会偏移啊 马上去pc端查看样式验证 结果发现它默认的样式确实和上面一样 但是css样式规则表示 margin-left: -51.3pt 未生效生效的是另外一个样式 这个index.vue是什么文件呢 于是点开看看 发现这个文件已经对编辑器的一些样式做了优化 我完全可以把这些样式放到手机端去
解决
构造同样的层级关系
div classeditor div classw-e-text-containerdiv classw-e-text 将样式拷贝过来验证由于富文本是从后台读取的 使用了domPropsInnerHTML 使用了它之后 下面样式editor .w-e-text table 不生效; 解决方式是前面加一个deep /deep/ .editor .w-e-texttable 验证生效 完美解决
