评论

新富文本组件

全新的富文本组件,便捷小巧且功能强大

mp-html

小程序富文本组件

立即体验

功能介绍

  •  支持在多个平台使用
  •  支持丰富的标签(包括 table、video、svg 等)
  •  支持丰富的事件效果(自动预览图片、链接处理等)
  •  支持锚点跳转、长按复制等丰富功能
  •  支持大部分 html 实体
  •  丰富的插件(关键词搜索、内容编辑等)
  •  效率高、容错性强且轻量化

使用方法

1. npm 方式

在项目根目录下执行

npm install mp-html

开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm

在需要使用页面的 json 文件中添加

{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

在需要使用页面的 wxml 文件中添加

<mp-html content="{{html}}" />

在需要使用页面的 js 文件中添加

Page({
  onLoad() {
    this.setData({
      html: 'Hello World!'
  })
 }
})

2. 源码方式

将源码中的代码包(dist/mp-weixin)拷贝到 components 目录下,更名为 mp-html

在需要使用页面的 json 文件中添加

{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}

后续步骤同上

获取

github 链接:https://github.com/jin-yufeng/mp-html

npm 链接:https://www.npmjs.com/package/mp-html

文档链接:https://jin-yufeng.gitee.io/mp-html

最后一次编辑于  2020-12-27  
点赞 25
收藏
评论

45 个评论

  • PRINTF
    PRINTF
    2020-04-13

    能用在taro吗?

    2020-04-13
    赞同 1
    回复 8
    查看更多(3)
  • :)
    :)
    01-18

    mp-html这个标签是展示,维护在哪里?

    01-18
    赞同
    回复 1
  • 刘👌 1
    刘👌 1
    2020-11-25

    大佬tagStyle:{

          table: 'border:1px solid #f6f8fa; max-width:710rpx',

          th: 'border-top:1px solid gray;border-bottom:1px solid gray;',

          tr: 'border-top:1px solid gray;border-bottom:1px solid gray;',

          td: ''

        }

    表格 tr 属性怎么加?

    2020-11-25
    赞同
    回复
  • 逝去的刹那
    逝去的刹那
    2020-11-16

    太厉害了

    2020-11-16
    赞同
    回复
  • 🌴 仄言
    🌴 仄言
    2020-10-30

    我的视频解析出来必须给视频加固定的宽高,不然不显示,还有显示出来的有黑边,怎么解决呢?

    2020-10-30
    赞同
    回复 1
    • 金煜峰
      金煜峰
      2020-10-30
      调试一下看看呗,是不是给video加了默认样式
      2020-10-30
      回复
  • 忽然之间
    忽然之间
    2020-10-23

    求教下 span标签解析之后能添加点击事件吗

    2020-10-23
    赞同
    回复 3
  • Sun.🌕
    Sun.🌕
    2020-09-16

    使用这个组件在安卓真机测试好使,在苹果手机不好使视频音频无法播放


    2020-09-16
    赞同
    回复 1
    • 金煜峰
      金煜峰
      发表于小程序端
      2020-09-18
      格式问题吧,你直接放在video和audio组件里试试
      2020-09-18
      回复
  • 云龙
    云龙
    2020-07-07

    这个在当前view不显示的情况下获取到的boundingClientRect数据高度有误

    https://developers.weixin.qq.com/s/I0efKFmr7si5

    我将view的left改成了100%,boundingClientRect的height值发生了变化

    2020-07-07
    赞同
    回复 3
    • 金煜峰
      金煜峰
      2020-07-08
      left:100%会导致宽度变小,所以高度会变大,style里加上width:100%后高度就不会变了
      2020-07-08
      回复
    • 云龙
      云龙
      2020-07-08回复金煜峰
      谢谢,不过不知道为什么加到组件里之后height的值就会出问题。设置了width也不行。https://developers.weixin.qq.com/s/zmC3GGma7kiX  清除缓存后重新加载height就是42,刷新一下又变成了225
      2020-07-08
      回复
    • 金煜峰
      金煜峰
      2020-07-08回复云龙
      你在图片没加载完毕前就去获取高度了,225才是图片加载完后的高度,组件有一个ready事件,可以返回最终的高度的
      2020-07-08
      回复
  • error
    error
    2020-07-06

    太棒了, 解决了我的大问题

    2020-07-06
    赞同
    回复 1
    • if
      if
      2020-10-13
      怎么做的
      2020-10-13
      回复
  • 云龙
    云龙
    2020-06-11

    支持在cover-view里面显示吗?

    现在画在webgl-canvas上只能用cover-view

    2020-06-11
    赞同
    回复 1
    • 金煜峰
      金煜峰
      2020-06-11
      应该是不行的,cover-view里只支持支持嵌套 cover-view、cover-image
      2020-06-11
      回复

正在加载...

登录 后发表内容