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

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

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

(1)全局配置filter方法,实现富文本内容截取转换,附上'rich-txt-p'样式类

javascript 复制代码
/**
 * 富文本内容处理
*/
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)使用

相关推荐
谢一歇_fn2 小时前
如何在uni-app中自定义输入框placeholder的样式
前端·javascript·uni-app
车轮滚滚__4 小时前
uniapp 小程序 安卓苹果 短视频解决方案
ios·小程序·uni-app·安卓·html5
沃野_juededa10 小时前
关于uniapp 中uview input组件设置为readonly 或者disabled input区域不可点击问题
java·前端·uni-app
哎哟喂_!10 小时前
UniApp 实现分享功能
前端·javascript·vue.js·uni-app
k19551423910 小时前
uniapp常用
前端·javascript·uni-app
qq_4194291314 小时前
uni-app中使用RenderJs 使用原生js
前端·javascript·uni-app
chengRantianxia15 小时前
UNIAPP项目记录
前端·vue.js·uni-app
哎哟喂_!16 小时前
在 UniApp 中实现 App 与 H5 页面的跳转及通信
前端·javascript·vue.js·uni-app
奎歪歪1 天前
UniApp页面路由详解
uni-app
小旭@1 天前
uniapp 微信小程序遇到的坑
微信小程序·uni-app