微信小程序解析富文本编辑器HTML

1、首先要下载wxParse包下载地址 并放到根目录下

2、在app.wxss 中引入wxParse.wxss文件,

@import "wxParse/wxParse.wxss";

3、在需要用到解析HTML的wxss页面 中引入wxParse.wxss文件,

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

4、在需要用到解析HTML的js页面 中引入wxParse.js文件

//引入文件
var WxParse = require('../../wxParse/wxParse.js');
//内容解析
var content = res.data.content
WxParse.wxParse('content', 'html', content, that, 3);

参数说明
WxParse.wxParse(输入需要解析的内容, 解析类型, 输出变量值, that, 边距(默认为0));

5、在需要解析的wxml页面中输出

<template is="wxParse" data="{{wxParseData:content.nodes}}"/>

另外如果有输出图片的时候,会遇到图片不居中,解决方法如下

//在wxss中加入
image{
  width: 100% !important;
}

欢迎加群讨论:群号-578385176

你可能感兴趣的:(微信小程序)