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)使用

相关推荐
Q_Q19632884755 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育7 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e8 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张8 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
不知名的前端专家13 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa14 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074715 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa16 小时前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店
编程迪16 小时前
小说阅读系统Java源码 小说阅读软件开发 小说app小程序
小程序·uni-app·小说源码·小说系统·小说阅读app
Q_Q51100828517 小时前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app