评论

新富文本组件

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

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-03-19

    长图在iphone6下 会模糊显示,安卓和6plus正常

    2020-03-19
    赞同
    回复 2
    • 金煜峰
      金煜峰
      2020-03-19
      这估计的你们自己真机调试一下了,我也不知道为啥
      2020-03-19
      回复
    • 王妙端
      王妙端
      2020-03-24回复金煜峰
      应该是iphone6对长图的支持不够优化 我的长图有10000多像素
      2020-03-24
      回复
  • 王妙端
    王妙端
    2020-03-19

    图片命名为中文显示不出来

    2020-03-19
    赞同
    回复 2
    • 金煜峰
      金煜峰
      2020-03-19
      提供一下图片链接?
      2020-03-19
      回复
    • 王妙端
      王妙端
      2020-03-19回复金煜峰
      解决了 试后台编辑器传过来就错了
      2020-03-19
      回复
  • Three
    Three
    2020-03-10

    这是我的数据

    2020-03-10
    赞同
    回复 1
    • Three
      Three
      2020-03-10
      项目是阅读文章  当触底是加载更多  用的parser解析  第一次加载是正常的  当触底循环加载时 图片会不自适应(可左右滑动)   有时图片不能点击放大
      2020-03-10
      回复
  • Three
    Three
    2020-03-10

    他会变成左右滑动

    2020-03-10
    赞同
    回复 1
    • TNT
      TNT
      2020-03-11
      2020-03-11
      2
      回复
  • 子非鱼LX
    子非鱼LX
    2020-01-29

    在哪里下载?

    2020-01-29
    赞同
    回复 2
  • 梦屿千寻
    梦屿千寻
    2020-01-22

    你好,我的小程序富文本里面只有有视频时会报这个错,纯图片不会报这个错:Failed to load local image resource /pages/gooddetails/true the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

    2020-01-22
    赞同
    回复 2
    • 金煜峰
      金煜峰
      2020-01-22
      哪里用到了 /pages/gooddetails/true?
      2020-01-22
      回复
    • 金煜峰
      金煜峰
      2020-01-23
      是不是最新版?
      2020-01-23
      回复
  • 怎能忘了西游🐳
    怎能忘了西游🐳
    2020-01-07

    多图之前的间距如何去掉

    2020-01-07
    赞同
    回复 8
    • 怎能忘了西游🐳
      怎能忘了西游🐳
      2020-01-07
      如果设置font-size:0,会影响字体
      2020-01-07
      回复
    • 金煜峰
      金煜峰
      2020-01-07
      给 img 设置 display:block 或者 float:left 都可以
      2020-01-07
      回复
    • 怎能忘了西游🐳
      怎能忘了西游🐳
      2020-01-08回复金煜峰
      是的,但是我通过trees .img选不中, 只能trees rich-text,我用的font-size:0
      2020-01-08
      回复
    • 金煜峰
      金煜峰
      2020-01-08
      可以用 tag-style 属性或者 style 标签设置
      2020-01-08
      回复
    • 怎能忘了西游🐳
      怎能忘了西游🐳
      2020-01-09回复金煜峰
      我能不能单独修改某个类名的样式
      2020-01-09
      回复
    查看更多(3)
  • 怎能忘了西游🐳
    怎能忘了西游🐳
    2019-12-18

    大佬,我这个视频解析不出来请问有啥原因吗?

    2019-12-18
    赞同
    回复 7
    查看更多(2)
  • 🌈
    🌈
    2019-12-11

    无法解析&ldquo;(中文双引号),请问怎么解决呀?

    2019-12-11
    赞同
    回复 2
    • 金煜峰
      金煜峰
      2019-12-11
      用的是最新版吗?我试了一下是可以的
      2019-12-11
      回复
    • 🌈
      🌈
      2019-12-12回复金煜峰
      哦,我用的是老版的,更新后就可以了,感谢!
      2019-12-12
      回复
  • 不是山谷
    不是山谷
    2019-12-11

    支持小程序navigator 标签吗  我想从a小程序跳转到b小程序


    2019-12-11
    赞同
    回复 2
    • 金煜峰
      金煜峰
      2019-12-11
      可以在 bindlinkpress 回调里用 wx.navigateToMiniProgram 实现跳转,没有直接用 navigator 标签模拟 a 标签是因为有人希望点击的时候可以不自动跳转
      2019-12-11
      回复
    • 金煜峰
      金煜峰
      2019-12-16
      最新版给a标签加上app-id和path就可以直接跳转别的小程序了
      2019-12-16
      回复

正在加载...

登录 后发表内容