评论

新富文本组件

2019-04-13
19571浏览
61评论

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

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

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

61 个评论

  • HW
    HW    2021-03-31

    taro想用editable插件,请问要怎么操作?

    2021-03-31
    赞同 1
    回复 1
    • 金煜峰
      金煜峰
      2021-04-01
      npm install mp-html
      然后打开 node_modules/mp-html
      执行
      npm install
      npm run build
      最后将 dist 目录下需要平台的内容拷贝到项目 components 目录中，按 taro 要求 https://nervjs.github.io/taro/docs/mini-third-party/ 引入原生组件
      2021-04-01
      赞
      回复
  • 褐瞳
    褐瞳    2021-03-05

    如果是用npm的方式使用需要更改为

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

    不然会报找不到mp-html的错误

    其实就是dist文件夹中的mp-weixin中的index文件

    2021-03-05
    赞同 1
    回复 1
    • 金煜峰
      金煜峰
      2021-03-06
      本地设置里勾线使用 npm 模块，然后点击工具-构建 npm
      json 里面写 "mp-html": "mp-html" 就可以了
      2021-03-06
      赞
      回复
  • PRINTF
    PRINTF    2020-04-13

    能用在taro吗？

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

    微信小程序想用editable插件,请问要怎么操作？

    03-01
    赞同
    回复
  • 挣能亮
    挣能亮    01-27
    按照步骤操作，为什么页面只显示文字，没有控件呢？
    01-27
    赞同
    回复 2
  • Oh
    Oh    2021-11-17

    图片是base64格式，没有解析成image标签，导致无法预览等系列操作

    2021-11-17
    赞同
    回复 1
    • 金煜峰
      金煜峰
      2021-11-17
      wx.previewImage 不支持 base64；且用 base64 的一般都是小图片；所以 base64 图片不支持预览
      2021-11-17
      赞
      回复
  • 唐同学
    唐同学    2021-11-04

    你好，提示：

    VM17 WAService.js:2 [Component] property received type-uncompatible value: expected <String> but get null value. Used empty string instead.

    怎么解决？谢谢

    2021-11-04
    赞同
    回复 1
  • Ories-朱骏杰
    Ories-朱骏杰    2021-09-18

    请问 有taro使用事件的demo么 意境渲染出来，但是事件全都无效不知道为什么

    2021-09-18
    赞同
    回复
  • 卫东
    卫东    2021-09-12

    引入mp-html后，为什么显示是空白？

    2021-09-12
    赞同
    回复 5
    • 金煜峰
      金煜峰
      2021-09-12
      提供可复现的 demo 项目
      2021-09-12
      赞
      回复
    • 卫东
      卫东      2021-09-20回复金煜峰
      谢谢啦，我已经发现是我的问题了。
      2021-09-20
      赞
      回复
    • 挣能亮
      挣能亮      01-27回复卫东
      我的也显示空白，请问你是怎么解决的？
      01-27
      赞
      回复
    • 挣能亮
      挣能亮      01-27回复金煜峰
      我按照步骤操作，页面上只显示 Hello World! 没有可以插入图片或者其他的控件按钮
      01-27
      赞
      回复
    • 挣能亮
      挣能亮      01-27
      请问像这样，没有显示控件，您是怎么解决的？
      01-27
      赞
      回复
  • 李海涛
    李海涛    2021-09-03

    请问有谁知道合并单元格怎么显示?

    2021-09-03
    赞同
    回复 1
    • 金煜峰
      金煜峰
      2021-09-04
      单元格设置 colspan 或者 rowspan 就可以啊
      2021-09-04
      赞
      回复

正在加载...

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

文章标签
rich-text富文本html