评论

新富文本组件

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

mp-html

小程序富文本组件

news

  1. 欢迎加入 QQ 交流群:699734691
  2. 示例小程序添加获取组件包功能

功能介绍

  •  支持在多个平台使用
  •  支持丰富的标签(包括 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

最后一次编辑于  2022-03-04  
点赞 37
收藏
评论

70 个评论

  • 忽然之间
    忽然之间
    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
      回复
  • 往事如风besos
    往事如风besos
    2020-05-22

    selectable 设置为true了 为啥之前可以复制,突然又不能复制了

    2020-05-22
    赞同
    回复 4
  • 繁星烁烁🌟
    繁星烁烁🌟
    2020-05-13

    请问a标签是不是只能填小程序内不在tabBar上的页面,是不是只会用navigateto这种,不会用switchtab

    2020-05-13
    赞同
    回复 3
    • 金煜峰
      金煜峰
      2020-05-13
      目前是的,这里可以改进一下
      2020-05-13
      回复
    • 金煜峰
      金煜峰
      2020-05-13
      现在应该可以了
      2020-05-13
      1
      回复
    • 繁星烁烁🌟
      繁星烁烁🌟
      2020-05-14回复金煜峰
      看到了,感谢😁😁
      2020-05-14
      回复
  • 2020-04-10

    这个属性在真机上调试 不兼容 text-alignjustify;


    2020-04-10
    赞同
    回复 12
    • 金煜峰
      金煜峰
      2020-04-10
      是模拟器上可以,真机上不行?
      2020-04-10
      回复
    • 2020-04-10回复金煜峰
      对,模拟器可以,就真机上失效了,text-align: center 这个属性就行。是不是我哪里搞错了,
      2020-04-10
      回复
    • 金煜峰
      金煜峰
      2020-04-10回复
      提供一下 html 和手机型号?
      2020-04-10
      回复
    • 2020-04-10
      2020-04-10
      回复
    • 2020-04-10
      2020-04-10
      回复
    查看更多(7)
  • 往事如风besos
    往事如风besos
    2020-03-25

    支持文字复制吗?

    2020-03-25
    赞同
    回复 1
    • 金煜峰
      金煜峰
      2020-03-25
      设置 selectable 属性即可
      2020-03-25
      1
      回复
  • 王妙端
    王妙端
    2020-03-20

    发布上去,图片点击无法查看大图

    2020-03-20
    赞同
    回复 7
    • 金煜峰
      金煜峰
      2020-03-20
      这是 wx.previewImage,直接把链接放在里面试试吧
      2020-03-20
      回复
    • 王妙端
      王妙端
      2020-03-24回复金煜峰
      不是 是Parser自带  测试环境可以 也可以转发朋友 保存大图 上正式环境不可以了
      2020-03-24
      回复
    • 王妙端
      王妙端
      2020-03-24回复金煜峰
      2020-03-24
      回复
    • 王妙端
      王妙端
      2020-03-24
      2020-03-24
      回复
    • 王妙端
      王妙端
      2020-03-24
      发现是我正式环境图片不是https开头  跟这个有关系是吗
      2020-03-24
      回复
    查看更多(2)

正在加载...

登录 后发表内容