评论

新富文本组件

2019-04-13
36994浏览
70评论

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

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 个评论

  • 我是韭菜我怕谁🙈
    我是韭菜我怕谁🙈
    2021-07-05

    请问taro如何使用？

    2021-07-05
    赞同
    回复
  • 楚智
    楚智
    2021-06-05

    使用源码方式 拷贝 dist/mp-weixin 出来 解析不了 svg

    2021-06-05
    赞同
    回复 4
    • 金煜峰
      金煜峰
      2021-06-06
      提供可复现的 demo 项目
      2021-06-06
      赞
      回复
    • 楚智
      楚智
      2021-06-07回复金煜峰
      2021-06-07
      赞
      回复
    • 楚智
      楚智
      2021-06-07回复金煜峰
      这个svg使用了渐变linearGradient
      2021-06-07
      赞
      回复
    • 金煜峰
      金煜峰
      2021-06-10
      linearGradient确实有问题，我修复一下
      2021-06-10
      赞
      回复
  • 冰雪
    冰雪
    2021-05-18

    mp-html后台文本框录入图片不显示，本地测试时用线上图片能显示、用本地图片不显示，是何原因？

    2021-05-18
    赞同
    回复
  • .
    .
    2021-05-12

    为什么不能构建NPM

    2021-05-12
    赞同
    回复
  • 哄哄
    哄哄
    2021-05-11

    如何在微信小程序 kbone框架下调用api接口setContent()来添加长内容渲染？

    使用

    <mp-html id="article" />

    var ctx = this.selectComponent('#article')

    获取组件实例报错： TypeError: this.selectComponent is not a function

    2021-05-11
    赞同
    回复 6
    • 金煜峰
      金煜峰
      2021-05-11
      你用的是哪个模板，vue 的话应该用 ref 来获取？
      2021-05-11
      赞
      回复
    • KangltTAT
      KangltTAT
      2021-05-12回复金煜峰
      const ctx = this.$refs.article
          ctx.setContent(this.html)
      这个也是提示TypeError: i.setContent is not a function
      2021-05-12
      赞
      回复
    • 金煜峰
      金煜峰
      2021-05-12回复KangltTAT
      我试了一下，这样子可以 this.$refs.article._wxCustomComponent.setContent，不过要晚一点获取，一开始获取不到
      2021-05-12
      赞
      回复
    • 哄哄
      哄哄
      2021-05-14回复金煜峰
      在长内容渲染，通过 setContent 方法追加到末尾。但是会出现解析问题，如何处理避免该问题？
      2021-05-14
      赞
      回复
    • 金煜峰
      金煜峰
      2021-05-14回复哄哄
      你这是把一个标签截成两半了吧，那肯定会出问题
      2021-05-14
      赞
      回复
    查看更多(1)
  • 行囊
    行囊
    2021-03-18

    小程序示例上面的编辑器组件有没有，需要自己写吗？

    2021-03-18
    赞同
    回复 15
    查看更多(10)
  • :)
    :)
    2021-01-18

    mp-html这个标签是展示，维护在哪里？

    2021-01-18
    赞同
    回复 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
      赞
      回复

正在加载...

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

文章标签
rich-text富文本html