举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > 微信小程序内容组件 rich-text

微信小程序内容组件 rich-text

2023-06-08 00:31

 微信小程序内容组件 rich-text

# rich-text

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

富文本。

属性 类型 默认值 必填 说明 最低版本
nodes array/string [] 节点列表/HTML String 1.4.0
space string 显示连续空格 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
bdo dir
big
blockquote
br
caption
center
cite
code
col span,width
colgroup span,width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img alt,src,height,width
ins
label
legend
li
mark
nav
ol start,type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table width
tbody
td colspan,height,rowspan,width
tfoot
th colspan,height,rowspan,width
thead
tr colspan,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 =
`<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`

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

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">通过HTML String渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
        <block wx:if="{{renderedByHtml}}">
          <rich-text nodes="{{htmlSnip}}"></rich-text>
        </block>
      </view>
    </view>

    <view class="page-section">
      <view class="page-section-title">通过节点渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
        <block wx:if="{{renderedByNode}}">
          <rich-text nodes="{{nodes}}"></rich-text>
        </block>
      </view>
    </view>
  </view>

</view>


阅读全文
以上是鳄鱼CMS为你收集整理的 微信小程序内容组件 rich-text全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • 微信小程序注册小程序怎么注销 微信小程序 注册小程序

    微信小程序注册小程序怎么注销 微信小程序 注册小程序

    2023-05-18

    注册小程序每个小程序都需要在app.js中调用App方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。详...

  •  PostgreSQL 控制文本搜索

    PostgreSQL 控制文本搜索

    2023-05-16

    12.3.1. 解析文档12.3.2. 解析查询12.3.3. 排名搜索结果12.3.4. 加亮结果要实现全文搜索必须要有一个从文档创建tsvector以及从用...

  •  PostgreSQL 索引类型

    PostgreSQL 索引类型

    2023-04-24

    PostgreSQL提供了多种索引类型: B-tree、Hash、GiST、SP-GiST 、GIN 和 BRIN。每一种索引类型使用了 一种不同的算法来适应不同...

  •  PostgreSQL 操作符类和操作符族

    PostgreSQL 操作符类和操作符族

    2023-05-04

    一个索引定义可以为索引中的每一列都指定一个操作符类。CREATE INDEX name ON table (column opclass [ ( opclass_options ) ] [...

  •  PostgreSQL SPI_prepare_cursor

    PostgreSQL SPI_prepare_cursor

    2023-04-03

    SPI_prepare_cursor — 预备一个语句,但是不执行它大纲SPIPlanPtr SPI_prepare_cursor(const char * command, int nargs,Oid * ...

© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们