小程序的rich-text样式怎么修改,图片超出屏幕等问题？

由于米醋儿小程序之前的源码丢失了，现在需要重写写我的小程序，这里用到了rich-text组件，同时也需要美化我的文章详情的样式，这里简单给大家示范。

原理就是通过正则给 p img a 等标签加上class，再通过class进行样式的调整；

后端如下PHP代码

//rich-text 中图片超出显示解决办法
        $content["article"]["info"] = str_replace("<img ", "<img class='contentImg'",$content["article"]["info"]);

//替换文章中的图片为配置的cdn前缀
        $content["article"]["info"] = str_replace(\request()->domain(),config('web.cdn'), $content["article"]["info"]);

// p 标签添加一些class
        $content["article"]["info"] = str_replace("<p","<p class='contentP'", $content["article"]["info"]);
        $content["article"]["info"] = str_replace("<h1","<h1 class='contentH1'", $content["article"]["info"]);
        $content["article"]["info"] = str_replace("<h2","<h2 class='contentH2'", $content["article"]["info"]);
        $content["article"]["info"] = str_replace("<h3","<h3 class='contentH3'", $content["article"]["info"]);
        $content["article"]["info"] = str_replace("<h4","<h4 class='contentH4'", $content["article"]["info"]);
        $content["article"]["info"] = str_replace("<h5","<h5 class='contentH5'", $content["article"]["info"]);

小程序页面如下：

rich-text {

color: #353535;
			letter-spacing: 1rpx;

.contentP {
				text-indent: 2rem;
			}
			.contentImg{
				max-width: 98%;
				height: auto;
				margin: 0 auto;
			}
			.contentH1{font-size: 1.2rem;}
			.contentH2{font-size: 1.1rem;}
			.contentH3{font-size: 1rem;}
			.contentH4{font-size: 0.9rem;}
			.contentH5{font-size: 0.8rem;}

}
		
这里只是简单给大家示范一下，用的方法比较简单，大家可以自己寻求更好的解决办法。

注:原创不易,转载请注明出处( https://micuu.com/new/1945.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

小程序的rich-text样式怎么修改,图片超出屏幕等问题？

留言反馈