微信富文本编辑器,调用文章主体内容展示

首先我们打开

https://github.com/icindy/wxParse
2选1
https://gitee.com/quinnxiao/wxParse

下载包

放入page文件夹内

image.png

只需要拷贝wxParse 内的wxParse文件夹即可!


1、wxss文件内引入

@import "../../wxParse/wxParse.wxss";

懒得麻烦就在app.wxss内引入

@import "/page/wxParse/wxParse.wxss";

2、js内引入

const WxParse = require('../../wxParse/wxParse.js');

3、js内转换

/*
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/


  var article = res.data[0].post;
  WxParse.wxParse('art', 'html', article, that,5);

改成art容易理解一点

4、.wxml页面内引用

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:art.nodes}}"/>

image.png

写的好!

微信扫一扫赏大洋