解决:微信小程序富文本识别不了空白p标签的方法

摘要:
背景中的富文本有时会给出一个空白换行符,就像这样,但小程序似乎解决了这样一个问题,即这样的标签不会留下空白,并且选项卡无法转换和识别。尝试提交:、和。前端仍然不显示空白内容的新行。无论是富格文本还是wxParse,都无法达到预期效果。总是这样…我会放弃吗?

后台富文本有时候会给空白的换行,像这样

解决:微信小程序富文本识别不了空白p标签的方法第1张

 但是小程序貌似解析出这样的标签不会留出它空白的位置,<br/>标签页不能被转换识别

试过提交 : <p></p> 、<p><br/></p>、 <br/>这三种方式,前端照样不显示空白内容的换行

不管是rich-text还是 wxParse 都达不到想要的效果

解决:微信小程序富文本识别不了空白p标签的方法第2张

 一直这样...

我就放弃了吗?

不!

首先试试强制给标签加padding,达到效果:

但是这样每个解析的标签都有padding. 文本就变得很....解决:微信小程序富文本识别不了空白p标签的方法第3张

 所以我尝试修改wxParse 来达到效果

我是在页面js直接解析的,一步步找到了方法,具体位置如下

解决:微信小程序富文本识别不了空白p标签的方法第4张

            if (node.tag === 'p') { //当前如果是p标签
                if (node.nodes == undefined) { //如果没有nodes就强行赋值nodes
                    var nodes = [{
                        attr: {
                            style: ["padding:", "15rpx", "0"]
                        },
                        index: "0.0.0.0",
                        node: "element",
                        tag: "span",
                        tagType: "inline",
                        styleStr: "padding:15rpx 0;"
                    }]

                    node.nodes = nodes
                }
            }

在end方法里面,通过对比其他正常解析的元素发现,换行p会被解析,但是因为没有内容,所以没有nodes

所以我先给了首行内容一个color ,抄他给color的样子强赋值给没有nodes的node

也算是曲线救国吧,暂时也没有别的办法

解决:微信小程序富文本识别不了空白p标签的方法第5张

 添加之后,已经能够展示空白换行的部分了

解决:微信小程序富文本识别不了空白p标签的方法第6张

 圆满!收工!

免责声明:文章转载自《解决:微信小程序富文本识别不了空白p标签的方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇PG-用户|角色管理给Nginx配置日志格式和调整日期格式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS盒子模型+box-sizing

当对文档进行布局时,浏览器渲染引擎会根据css-Box模型(CSS Basic Box model)将所有元素表示为一个矩形盒子。CSS决定这些盒子的大小,位置以及属性(颜色,背景,边框尺寸) 标准盒模型 从外向内依次为: Margin + border + padding + content-width 外边距区域margin area用空白区域扩展边框...

CSS样式大全

字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX、PD、EM 粗细...

h5 下ios适配底部小黑条,简单解决方案,只需一步

在页面加入一行css代码即可 @supports (bottom: env(safe-area-inset-bottom)) { body, .footer{ box-sizing:content-box;padding-bottom:constant(safe-area-inset-bottom);...

coding.net------WEBHOOK自动部署实战

使用WebHook自动部署项目今天在laravist.com看到了这个 Webhook 自动部署Git项目 这个教学视频,以前自己也想做这样做一个利用Git WebHook的自动化部署,但总是不成功,今天看到视频就想着再次尝试一下,虽然有视频参考但还是遇到了一些坑,在这里我写下自己的部署过程.注:1.我是在de style="box-sizing: bo...

[置顶] CSS语言精粹

本文主要是对CSS中一些比较重要的高级部分作了一些整理,这些内容也许不是经常使用,但是都很强大。本文将长期更新。 边框 CSS2.1 规定:元素的背景是内容、内边距和边框区的背景。设置背景颜色时是没有问题的,背景色显示在边框下面,但是当使用背景图片时你会发现左边框和右边框下面并没有背景图片。这时需要把position-x和position-y设成负值,大小...

使用GAN 进行异常检测——anoGAN,TODO,待用于安全分析实验

先说实验成功的代码: git clone https://github.com/tkwoo/anogan-keras.git mkdir weights python main.py --mode train 即可看到效果了! 核心代码:main.py from __future__ import print_function import matp...