uniapp rich-text 富文本组件在微信小程序中自定义内部元素样式

作者：AllinToyou | 2024-02-19 06:43:27

踩

rich-text 富文本组件在微信小程序中，无法直接通过外部css样式控制文章内容样式。

解决方案：将传入的富文本内容截取并添加自定义样式类名

（1）全局配置filter方法，实现富文本内容截取转换，附上‘rich-txt-p’样式类


/**
 * 富文本内容处理
*/
export function richTxtFilter(content) {
	if (!content) return ''
	let val
	val = content.replace(/\<p/gi, '<p class="rich-txt-p" ');
	return val
}

（2）在app.vue中编辑‘rich-txt-p’内容，即富文本需要自定义的样式。

注：需要用 ::v-deep 深度绑定

（3）使用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/113178