评论

新富文本组件

2019-04-13
11815浏览
45评论

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

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
      赞
      回复

正在加载...

请 登录 后发表内容
作者介绍

文章标签
rich-text富文本html