甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

创新互联小程序教程：微信小程序内容组件rich-text

# rich-text

基础库 1.4.0 开始支持，低版本需做 兼容处理。

富文本。

属性 类型 默认值 必填 说明 最低版本
nodesarray/string[]否节点列表/HTML String1.4.0
spacestring否显示连续空格2.4.1

space 的合法值

值 说明 最低版本
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

# nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

属性 说明 类型 必填 备注
name标签名string是支持部分受信任的 HTML 节点
attrs属性object否支持部分受信任的属性，遵循 Pascal 命名法
children子节点列表array否结构和 nodes 一致

文本节点：type = text*

属性 说明 类型 必填 备注
text文本string是支持entities

# 受信任的HTML节点及属性

全局支持class和style属性，不支持id属性。

节点 属性
a
abbr
address
article
aside
b
bdi
bdodir
big
blockquote
br
caption
center
cite
code
colspan，width
colgroupspan，width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
imgalt，src，height，width
ins
label
legend
li
mark
nav
olstart，type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
tablewidth
tbody
tdcolspan，height，rowspan，width
tfoot
thcolspan，height，rowspan，width
thead
trcolspan，height，rowspan，width
tt
u
ul

# Bug & Tip

  1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
  2. tip: rich-text 组件内屏蔽所有节点的事件。
  3. tip: attrs 属性不支持 id ，支持 class 。
  4. tip: name 属性大小写不敏感。
  5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
  6. tip: img 标签仅支持网络图片。
  7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

# 示例代码

在开发者工具中预览效果

JavaScript

const htmlSnip =
`

  
Title

  

    Life is like a box of
     chocolates.
  



`

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
    })
  }
})

 WXML


  
    
      通过HTML String渲染
      
        {{htmlSnip}}
        
        
          
        
      
    

    
      通过节点渲染
      
        {{nodeSnip}}


当前题目：创新互联小程序教程：微信小程序内容组件rich-text
网站网址：https://chengdu.cdxwcx.cn/article/dhjssde.html

其他资讯