uniapp:富文本回显

一、使用uniapp官方的标签

rich-text:

会出现图片无法显示的问题,可以用以下方法来过滤处理

<rich-text :nodes="question.title | formatRichHtml"></rich-text>
        formatRichHtml(html) {if (!html) {return html;}//控制小程序中图片大小let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {// console.log(match.search(/style=/gi));if (match.search(/style=/gi) === -1) {match = match.replace(/\<img/gi, '<img style=""');}return match;});newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');newContent = newContent.replace(/<br[^>]*\/>/gi, '');newContent = newContent.replace(/background-color[\s:]+[^;]*;/gi, '');return newContent;}

二、扩展插件

mp-html:

GitHub - jin-yufeng/mp-html: 小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用

组件属性

属性类型默认值说明
container-styleString容器的样式(2.1.0+)
contentString用于渲染的 html 字符串
copy-linkBooleantrue是否允许外部链接被点击时自动复制
domainString主域名(用于链接拼接)
error-imgString图片出错时的占位图链接
lazy-loadBooleanfalse是否开启图片懒加载
loading-imgString图片加载过程中的占位图链接
pause-videoBooleantrue是否在播放一个视频时自动暂停其他视频
preview-imgBooleantrue是否允许图片被点击时自动预览
scroll-tableBooleanfalse是否给每个表格添加一个滚动层使其能单独横向滚动
selectableBooleanfalse是否开启文本长按复制
set-titleBooleantrue是否将 title 标签的内容设置到页面标题
show-img-menuBooleantrue是否允许图片被长按时显示菜单
tag-styleObject设置标签的默认样式
use-anchorBooleanfalse是否使用锚点链接

还有一些扩展的,比如音视频

完~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582774.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win32 菜单编程学习1

新建一个Win32空工程; 添加一个main.cpp,添加一个窗口的win32代码; 运行,出来一个窗口,此时没有菜单; 然后在资源中插入菜单; 编辑菜单; 此时自动生成resource.h; 里面包含, #define IDR_MENU1 101 #define ID_TEST1_TEST101 …

嵌入式开发——ADC模拟信号和数字信号

模拟信号和数字信号 模拟信号 自然界中大多数物理量是连续变化的,比如温度、声音、压力等灯,它们在一定时间内,可以有无限多个不同的取值,这些信号就是模拟信号。模拟信号就是指用连续变化的物理量所表示的信号。 自然界中的物理量都需要通过传感器将其转换成电信号后,才能进…

桥接模式-举例

概叙&#xff1a;桥接模式用一种巧妙的方式处理多层继承存在的问题&#xff0c; 用抽象关联取代了传统的多层继承&#xff0c; 将类之间的静态继承关系转换为动态的对象组合关系&#xff0c; 使得系统更加灵活&#xff0c;并易于扩展&#xff0c; 同时有效控制了系统中类的个数…

Python武器库开发-武器库篇之Git创建远程仓库和建立SSH key 免密登陆(三十七)

武器库篇之Git创建远程仓库和建立SSH key 免密登陆(三十七) Git是一种版本控制系统&#xff0c;用于跟踪文件的更改和协调多人开发项目。它可以记录文件的历史更改&#xff0c;协助多人协作开发&#xff0c;并提供分支管理功能。Git是一个分布式系统&#xff0c;意味着每个人在…

听说!Art-DAQ实现了与LabVIEW的无缝连接

前言 阿尔泰科技与时俱进&#xff0c;推出Art-DAQ程序&#xff0c;与LabVIEW无缝连接&#xff0c;形成系统平台体系。持续不断地获取行业新技术&#xff0c;完善自主知识产权产品的研发&#xff0c;为客户提供优质服务。 什么是Labview&#xff1f; 从产品的角度来看&#x…

基于泊松-高斯噪声模型的标定计算方式

我在前面的博客三言两语讲讲 sensor 的噪声中分析过 sensor 的噪声类型&#xff0c;从本质上分析&#xff0c;噪声可以归类为与信号值有关的噪声&#xff0c;该部分噪声符合泊松分布&#xff1b;另一类为与信号无关的噪声&#xff0c;该部分噪声符合高斯分布。下面详细分析下参…

java项目应用MQTT传输数据

一、概述 近期做的一个项目需要传输数据给第三方。根据协定&#xff0c;采用MQTT进行数据的发送和订阅。一般来说&#xff0c;不通系统进行数据对接&#xff0c;一般采用RESTFul接口&#xff0c;走http。mqtt的话&#xff0c;顾名思义&#xff0c;就是一个消息队列。相比RESTF…

【SpringCloud Alibaba笔记】(1)SpringCloud Alibaba入门简介

SpringCloud Alibaba 为什么会出现SpringCloud Alibaba Spring Cloud Netflix已经进入维护模式&#xff0c;包括以下组件 spring-cloud-netflix-archaiusspring-cloud-netflix-hystrix-contractspring-cloud-netflix-hystrix-dashboardspring-cloud-netflix-hystrix-streams…

透彻掌握GIT基础使用

网址 https://learngitbranching.js.org/?localezh_CN 清屏 clear重新开始reset

科荣AIO UtilServlet存在任意文件读取漏洞

文章目录 产品简介漏洞概述指纹识别漏洞利用修复建议 产品简介 科荣AIO是一款企业管理软件&#xff0c;提供企业一体化管理解决方案。它整合了ERP&#xff08;如进销存、财务管理&#xff09;、OA&#xff08;办公自动化&#xff09;、CRM&#xff08;客户关系管理&#xff09…

阿里云数据库PolarDB费用价格_MySQL版_PolarDB_分布式版

阿里云数据库PolarDB租用价格表&#xff0c;云数据库PolarDB MySQL版2核4GB&#xff08;通用&#xff09;、2个节点、60 GB存储空间55元5天&#xff0c;云数据库 PolarDB 分布式版标准版2核16G&#xff08;通用&#xff09;57.6元3天&#xff0c;阿里云百科aliyunbaike.com分享…

力扣:56. 合并区间(贪心)

题目&#xff1a; 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff…

Leetcode—1572.矩阵对角线元素的和【简单】

2023每日刷题&#xff08;七十三&#xff09; Leetcode—1572.矩阵对角线元素的和 实现代码 class Solution { public:int diagonalSum(vector<vector<int>>& mat) {int n mat.size();if(n 1) {return mat[0][0];}int sum 0;int i 0, j n - 1;while(i &…

信息学奥赛一本通-编程启蒙:3030:练7.2 保留12位小数

3030&#xff1a;练7.2 保留12位小数 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 7361 通过数: 5724 【题目描述】 读入一个浮点数&#xff0c;保留 1212 位小数输出这个浮点数。 【输入】 只有一行&#xff0c;一个浮点数 xx(−105≤x≤105−105≤x≤105)。 …

Bean 生命周期 和 SpringMVC 执行过程

这里简单记录下 Bean 生命周期的过程&#xff0c;方便自己日后面试用。源码部分还没看懂&#xff0c;这里先贴上结论 源码 结论

遥感技术应用于作物类型种植面积估算实例

1.农作物遥感分类 1.1 利用多时相环境星 CCD 数据作物分类识别实验 采用支持向量机分类器进行基于象素遥感影像分类方法。在分类过程中&#xff0c;分别对不同日期的单景环境星数据以及不同日期环境星数据的组合进行分类&#xff0c;以评价环境星在作物分类中的应用潜力&#x…

云计算:OpenStack 配置云主机实例的资源实现内网互通

目录 一、实验 1. 环境 2.配置项目及用户 3.配置规格实例与镜像 4.配置VPC 5. 配置安全组 6. 创建云主机 cs_01 &#xff08;cirros系统&#xff09; 7.创建云主机 cs_02 &#xff08;cirros系统&#xff09; 8.创建云主机 cs_03 &#xff08;cirros系统&#xff09; …

JavaWeb的请求响应

一.请求 1.原始方式接收请求 获取请求参数 request.getParameter("name") HttpServletRequest 2.获取简单参数 方法参数名称和请求参数名称保持一致 RequestParam("name") 解决参数名称不一致问题&#xff0c;但是要注意默认必填 3.使用对象获取参数…

NFC物联网智能锁安全测试研究

针对短距离无线通信在物联网智能锁实际运用中的安全机制问题&#xff0c;通过理论分析和实际操作演示潜在的攻击流程&#xff0c;发现其存在的安全漏洞并提出可行的加固方法&#xff0c;并对加固后的通信系统进行CPN建模与安全性分析&#xff0c;对无线通信协议的安全性能提升、…

处理urllib.request.urlopen报错UnicodeEncodeError:‘ascii‘

参考&#xff1a;[Python3填坑之旅]一urllib模块网页爬虫访问中文网址出错 目录 一、报错内容 二、报错截图 三、解决方法 四、实例代码 五、运行截图 六、其他UnicodeEncodeError: ascii codec 问题 一、报错内容 UnicodeEncodeError: ascii codec cant encode charac…