微信小程序富文本编辑器

下载组件：

GitHub - icindy/wxParse: wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

git下载

git clone https://github.com/icindy/wxParse.git

基本使用方法

js引入

//在使用的View中引入WxParse模块.js
const WxParse = require('../../wxParse/wxParse.js');

wxss引入

//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

数据绑定.js

data:{
text: '<img src="http://images.haiwainet.cn/2022/0113/20220113044650364.jpg" ></img><p>富文本编辑器内容</p>',
}

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
//生命周期函数（开始进行富文本内容的显示）
  onLoad() {
    wxParse.wxParse('text', 'html', this.data.text, this, 0);
  },

模板引用

// 引入模板
<import src="/wxParse/wxParse.wxml"></import>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:text.nodes}}"></template>

WxParse是专门解析后台返给我们的HTML数据的，也叫做小程序的HTML解析器

这种方式可以解析 html/markdown 两种脚本，功能很强大

缺点：在解析富文本过程中，多次调用小程序的setData()方法，对性能有一定影响。

GitHub地址：github.com/icindy/wxParse

解压出来后，直接复制到小程序项目的根级目录

WXML：
      //引入
      <import src="/wxParse/wxParse.wxml"/>
      //article为JS里WxParsewxParse第一个参数
      <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

JS：
    //引入
    const WxParse = require('../../wxParse/wxParse.js');
    onLoad: function (options) {
      //第一个参数将成为WXML展示的数据名称
      //第三个参数是要展示的数据
      WxParsewxParse('article', 'html', this.data.articleHtml, this, 5);
    },

WXSS:
     //引入
     @import "/wxParse/wxParse.wxss";

另一种解析富文本的方法，rich-text为小程序自带富文本组件，直接使用即可

rich-text富文本组件是小程序1.4.0版本后推出来的，可以通过js脚本把html解析成一定格式的nodes，然后在 rich-text 中显示。

缺点：只能解析html内容，需要做兼容处理

WXML：
    //articleHtml是JS数据
    <rich-text nodes="{{articleHtml}}"></rich-text>

本作品采用《CC 协议》，转载必须注明作者和本文链接