Taro使用wxParse富文本组件

官方使用例子：Taro使用wxParse

项目开发主要使用的ts，但是ts直接在标签中import可能会报错，于是按照官方给的示范例子，单独封装成一个富文本组件。

下载wxParse，并把它放在components文件夹中
新建富文本组件
wxParseComponent.js文件

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'import Parse from '@/components/wxParse/wxParse.js'import './wxParse.scss'// let data = null;
export default class ParseComponent extends Component {componentDidMount() {if (this.props.data) {const {data} = this.props;Parse.wxParse('data', 'html', data, this.$scope, 5);}// data = '<div style="color: red">我是HTML代码</div>'// Parse.wxParse('data', 'html', data, this.$scope, 5)}render() {return (<View><import src='../../../components/wxParse/wxParse.wxml' /><template is='wxParse' data='{{wxParseData:data.nodes}}' /></View>)}
}

scss文件其实就是引入wxParse的scss文件，也可以在wxParseComponent.js文件直接引入

在需要的地方引入并使用

import ParseComponent from './wxParse/wxParseComponent.js' // 引入

            <View>{process.env.TARO_ENV === 'weapp' ? (<ParseComponent data={product.description} />) : (<View>只在小程序里支持</View>)}</View> // 使用

Taro使用wxParse富文本组件相关推荐

微信小程序富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件掌握使用微信小程序的表单组件掌握使用微信小程序的form表单及如何提交数据掌握使用微信小程序的导航及跳转组件一.基础内容组件 1.1 ...
基于nuxt和iview搭建OM后台管理系统实践(2)-quill富文本组件的封装
目录结构这是<基于nuxt和iview搭建OM后台管理系统实践>这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境自行开发的公共组件(富文本.地图.上传)介绍 ...
weui上传组件的图片封装到formdata_自定义toast-ui富文本组件的图片黏贴上传
最近博客中用到了这个富文本组件,发现这组件的图片无法支持截图黏贴以及上传图片是一长串base64字符串,非常不方便,所以通过文档,自定义一个一下上传方式,效果如图其中,上传图片是调用组件自带的ho ...
vue + wangeditor封装富文本组件
一.介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单. 官网:https://www.wangeditor.com/ 文档:https://www.wangedito ...
基于 Element-ui 的富文本组件quillEditor
开发后台管理系统经常需要用到富文本组件用来编辑文章,或者商城类的管理系统需要富文本编辑商品详情,但是有些富文本里面的上传图片功能实质是把图片转成base64字符串传给后台,如果上传的图片一多,那后台估 ...
抖音小程序Tiktok开发教程之基础组件 02 rich-text 富文本组件
什么是rich-text组件? rich-text富文本组可以支持显示html和css等复杂标签效果 rich-text 富文本组件运行效果 text组件如何使用呢? 首先,在ttml界面中添加下面代 ...
iOS富文本组件的实现—DTCoreText源码解析数据篇
本文转载 http://blog.cnbang.net/tech/2630/ DTCoreText是个开源的iOS富文本组件,它可以解析HTML与CSS最终用CoreText绘制出来,通常用于在一些需 ...
小程序封装富文本组件
富文本对于编辑文章什么的还是挺重要的.我封装了个功能比较齐全的富文本组件,方便以后项目可以使用,在这里分享出来,直接复制粘贴代码就可以直接使用啦! 效果图: 1.先创建一个组件 2.直接上组件edit ...
wxParse-微信小程序解析富文本组件的使用总结
wxParse是一款非常好用的解析微信小程序中富文本的组件,支持大部分的html标签: #####基本使用方法: (1)Copy文件夹wxParse ,放在小程序根目录下. wxParse/ -wxP ...
工作120:富文本组件封装
<template lang="html"><div class="editor">< ...

Taro使用wxParse富文本组件

Taro使用wxParse富文本组件相关推荐

最新文章

热门文章