前言

富文本格式（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小时内删除侵权内容。