当前位置: 首页 > news >正文

uni-app项目实战笔记26--uniapp实现富文本展示

方法一:使用uniapp官方插件:

<rich-text :nodes="noticeInfo.content"></rich-text>

:nodes传后台相应属性的值

缺点:不能实现图片点击预览,格式有限。

更多信息详见官方文档:rich-text | uni-app官网

方法二:使用uniapprtDCloud 插件市场其他组件,这里推荐mp-html:mp-html 富文本组件【全端支持,支持编辑、latex等扩展】 - DCloud 插件市场

这个插件平台兼容性,更新日期较近,说明开发团队在维护。

用法:

<mp-html :content="noticeInfo.content" />

:content传后台相应属性的值。

方法三:v-html

用法:

<view v-html="noticeInfo.content"></view>

v-html 可以 实现基础的富文本展示,但存在 安全性、样式兼容性和功能限制,不推荐。

相关文章:

  • MicroProfile的配置和MicroProfile健康
  • 设备树引入
  • 动态面板axure
  • 告别固定密钥!在单一账户下用 Cognito 实现 AWS CLI 的 MFA 单点登录
  • Spring Cloud Gateway 实战:网关配置与 Sentinel 限流详解
  • 零知开源——基于STM32F407VET6零知增强板的四路独立计时器
  • 快速掌握广告联盟APP开发全流程,短剧和游戏广告app
  • 全面拥抱vue3
  • kubectl get pod返回数据研究
  • InfluxDB 3 Core数据库管理指南:从概念到实操的完整流程
  • 机器学习开篇:算法分类与开发流程
  • JavaScript中Object()的解析与应用
  • Redis—主从复制
  • webpack+vite前端构建工具 -答疑
  • kubernetes部署3节点高可用elasticsearch v8.14.3
  • 【数学基础】复杂度理论
  • Python异步编程深度解析
  • 基于Spring Boot的网上购物平台设计与实现
  • AD22以上的基础操作
  • C++算法学习专题:双指针