小程序-富文本

Posted visiliki-lvy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序-富文本相关的知识,希望对你有一定的参考价值。

1 下载wx.parse安装包  地址:https://github.com/icindy/wxParse

2.在需要使用该插件的View(.js文件)中引入WxParse模板 例子:var WxParse= require(‘../../../wxParse/wxParse.js‘);

3.在需要使用的wxss中引入WxParse.wxss,也可以在app.wxss中引入 例子:@import"../../../wxParse/wxParse.wxss";

4.进行数据绑定 以下为官方文档介绍

var article= ‘<div>2333333333</div>‘; 

/** 

* WxParse.wxParse(bindName , type, data,target,imagePadding) 

* 1.bindName绑定的数据名(必填) 

* 2.type可以为html或者md(必填) 

* 3.data为传入的具体数据(必填) 

* 4.target为Page对象,一般为this(必填) 

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 

**/ 

var that = this; 

WxParse.wxParse(‘article‘, ‘html‘, article,that, 5);

 

我的项目代码

var article= postData.detail; 

var _this= this; 

WxParse.wxParse(‘article‘, ‘html‘, article,_this, 5);

 

 

5.在内容页(.wxml文件)中引用该模版文件,

其中data中article为bindName

导入文件 

<import src="../../../wxParse/wxParse.wxml" />

引用模版 

<template is="wxParse" data="wxParseData:article.nodes" /> 

以上是关于小程序-富文本的主要内容,如果未能解决你的问题,请参考以下文章

uniapp开发微信小程序富文本编辑器(样式仿腾讯文档)

微信小程序使用wxParse实现接入富文本编辑

微信小程序富文本编辑的图片超出

微信小程序富文本插件 Parser

小程序富文本解析利器mp-html

小程序富文本解析利器mp-html