前言

富文本格式（Rich Text Format）即RTF格式，又稱多文本格式，是由微軟公司開發的跨平臺文檔格式。大多數的文字處理軟件都能讀取和保存RTF文檔。它是一種方便于不同的設備、系統查看的文本和圖形文檔格式。

RTF使用美國國內標準協會（ANSI）、 PC-8、 Macintosh（mac蘋果），或 IBM 的 PC 字符設置控制顯示形式和打印形式。在不同的操作系統下創建的RTF文檔可以在多種操作系統和應用程序之間互相傳輸、查看。其作為 MS-DOS、 Microsoft Windows、 OS/2、 Macintosh蘋果系統，應用程序之間處理文檔的特殊翻譯軟件。

一、富文本使用

1.富文本屬性

nodes子屬性

現支持兩種節點，通過type來區分，分別是元素節點和文本節點，默認是元素節點，在富文本區域里顯示的HTML節點

1、元素節點：type = node

2、文本節點：type = text

2.富文本使用

const htmlSnip = `

` const nodeSnip = `Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'You never know what you're gonna get.' }] }] } }) ` Page({ onShareAppMessage() { return { title: 'rich-text', path: 'page/component/pages/rich-text/rich-text' } }, data: { htmlSnip, nodeSnip, renderedByHtml: false, renderedByNode: false, nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: #1AAD19;' }, children: [{ type: 'text', text: 'You never know what you\'re gonna get.' }] }] }, renderHtml() { this.setData({ renderedByHtml: true }) }, renderNode() { this.setData({ renderedByNode: true }) }, enterCode(e) { console.log(e.detail.value) this.setData({ htmlSnip: e.detail.value }) } })

通過HTML String渲染 {{htmlSnip}} 渲染HTML 通過節點渲染 {{nodeSnip}} 渲染Node

二、文本

1.文本屬性

const texts = [ '2011年1月，微信1.0發布', '同年5月，微信2.0語音對講發布', '10月，微信3.0新增搖一搖功能', '2012年3月，微信用戶突破1億', '4月份，微信4.0朋友圈發布', '同年7月，微信4.2發布公眾平臺', '2013年8月，微信5.0發布微信支付', '2014年9月，企業號發布', '同月，發布微信卡包', '2015年1月，微信第一條朋友圈廣告', '2016年1月，企業微信發布', '2017年1月，小程序發布', '......' ] Page({ onShareAppMessage() { return { title: 'text', path: 'page/component/pages/text/text' } }, data: { text: '', canAdd: true, canRemove: false }, extraLine: [], add() { this.extraLine.push(texts[this.extraLine.length % 12]) this.setData({ text: this.extraLine.join('\n'), canAdd: this.extraLine.length < 12, canRemove: this.extraLine.length > 0 }) setTimeout(() => { this.setData({ scrollTop: 99999 }) }, 0) }, remove() { if (this.extraLine.length > 0) { this.extraLine.pop() this.setData({ text: this.extraLine.join('\n'), canAdd: this.extraLine.length < 12, canRemove: this.extraLine.length > 0, }) } setTimeout(() => { this.setData({ scrollTop: 99999 }) }, 0) } })

{{text}} add line remove line

HTML 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。