一、使用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-style | String | 容器的样式（2.1.0+） | |
| content | String | 用于渲染的 html 字符串 | |
| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
| domain | String | 主域名（用于链接拼接） | |
| error-img | String | 图片出错时的占位图链接 | |
| lazy-load | Boolean | false | 是否开启图片懒加载 |
| loading-img | String | 图片加载过程中的占位图链接 | |
| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |
| preview-img | Boolean | true | 是否允许图片被点击时自动预览 |
| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |
| selectable | Boolean | false | 是否开启文本长按复制 |
| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
| tag-style | Object | 设置标签的默认样式 | |
| use-anchor | Boolean | false | 是否使用锚点链接 |
还有一些扩展的，比如音视频
