qmw
qs-mpvue-wxparse
npm i qs-mpvue-wxparse
qmw

qs-mpvue-wxparse

基于mpvue富文本,适用于各个公众号文章编辑器生成的富文本。

by qizhenshuai

1.0.0 (see all)License:MITTypeScript:Not Found
npm i qs-mpvue-wxparse
Readme

qs-mpvue-wxparse 基于mpvue富文本,支持HTML及markdown解析,适用于各个公众号文章编辑器生成的富文本。

支持 Html、Markdown 转 Wxml 可视化,修改自: wxParse

npm package npm downloads

属性

名称类型默认值描述
loadingBooleanfalse数据加载状态
classNameString自定义 class 名称
contentString渲染内容
noDataString数据不能为空空数据时的渲染展示
startHandlerFunction见源码自定义 parser 函数
endHandlerFunctionnull自定义 parser 函数
charsHandlerFunctionnull自定义 parser 函数
imagePropObject见下文图片相关参数

自定义 parser 函数具体介绍

  • 传入的参数为当前节点 node 对象及解析结果 results 对象,例如 startHandler(node, results)
  • 无需返回值,通过对传入的参数直接操作来完成需要的改动
  • 自定义函数会在原解析函数处理之后执行

imageProp 对象具体属性

名称类型默认值描述
modeString'aspectFit'图片裁剪、缩放的模式
paddingNumber0图片内边距
lazyLoadBooleanfalse图片懒加载
domainString''图片服务域名

事件

名称参数描述
preview图片地址,原始事件预览图片时触发
navigate链接地址,原始事件点击链接时触发

基本使用方法

  • 安装
npm i qs-mpvue-wxparse
  • 使用
<template>
  <div>
    <wxParse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>

<script>
import wxParse from 'qs-mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("~qs-mpvue-wxparse/src/wxParse.css");
</style>

渲染 Markdown

先将 markdown 转换为 html 即可

npm install marked
import marked from 'marked'
import wxParse from 'qs-mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: marked(`#hello, markdown!`)
    }
  }
}

Tips

  • v0.6 之后的版本样式文件需自行引入

  • 对性能要求较高的话,推荐使用这个原生组件版 wxParser-plugin

  • 打包时出错 ERROR in static/js/vendor.js from UglifyJs

参照以下配置使 babel 处理 mpvue-wxparse,或更新 UglifyJs 插件

// webpack.base.conf.js
{
  test: /\.js$/,
  include: [resolve('src'), /mpvue-wxparse/],
  use: [
    'babel-loader',
    {
      loader: 'mpvue-loader',
      options: {
        checkMPEntry: true
      }
    }
  ]
}

感谢

@stonewen| @Daissmentii | @wuyanwen | @vcxiaohan

Downloads/wk

2

GitHub Stars

19

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.0.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial