wepy 框架引入 wxParse 富文本組件,渲染編輯器內容

	https://github.com/icindy/wxParse

	使用方法:
		1>下載源碼,複製 wxParse/wxParse 目錄到我們項目的 components 組件目錄
			cp -r wxParse/wxParse components/

		2>在 js 中引入 wxParse 模塊
			var WxParse = require('../components/wxParse/wxParse.js')
			或
			import WxParse from '../components/wxParse/wxParse'

		3>在 wxss 引入 wxParse.css
			@import '/components/wxParse/wxParse.wxss';

		4>數據綁定
			方法:
				WxParse.wxParse(bindName, type, data, target, imagePadding)
			參數:
				bindName - 綁定的數據名(必填)
				type - 數據類型:html 或 md,支持將 HTML、Markdown 內容轉換爲微信小程序展示的內容(必填)
				data - 具體數據(必填)
				target - Page 對象,一般爲 this(必填)
				imagePadding - 當圖片自適應時,左右的 padding(默認爲 0)

			第一次看該方法,有點蒙,其實很簡單,應該就是:
				在 Wxparse 對象中,將傳入的 data 數據綁定到名爲 bindName 的字段上

			例如:
				我們的數據是:
					var htmlContent = '<p> 我是內容 </p>'

				想要綁定到 wxParse 的字段名爲:
					content

				WxParse.wxParse('content', 'html', htmlContent, this);

		5>在 wxml 中引入 wxParse 模板(使用 wxParse,必須要藉助 wxParse 的'模板',傳入綁定的數據,然後渲染出最終結果)
			<import src="../components/wxParse/wxParse.wxml" />
			<template is="wxParse" data="{{ wxParseData:content.nodes }}" />	// 注意這裏就是我們上面綁定的 bindName 名

	配置 emoji 表情:
		todo

	多數據格式:
		todo

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章