Skip to main content

rich-text

rich text component.

Example

bxml


<view class="container">  <head title="rich-text"></head>  <view class="page-section tc">    <view class="page-body">      <view class="rich-text-picker">        <picker          mode="selector"          range="{{SPACE_RANGE}}"          value="{{rangeIndex}}"          bindchange="onPickChange"        >          <view class="bnui-input">            Select a space:&nbsp;            {{space || "default"}}          </view>        </picker>      </view>
      <view class="page-section">        <view class="page-section-title">HTML string</view>        <view class="rich-text-textarea-wrapper">          <textarea            value="{{html}}"            bindinput="onTextareaInput"            maxlength="{{3000}}"          />        </view>        <view class="rich-text-wrp">          <rich-text            nodes="{{html}}"            space="{{space}}"            bindtap="onRichTextTap"            bind:longpress="onRichTextLongPress"          ></rich-text>        </view>      </view>
      <view class="page-section">        <view class="page-section-title">Nodes</view>        <view class="rich-text-textarea-wrapper">          <textarea            value="{{nodesStr}}"            bindinput="onNodesChange"            maxlength="{{3000}}"          />        </view>        <view class="rich-text-wrp">          <rich-text            nodes="{{nodes}}"            space="{{space || undefined}}"          ></rich-text>        </view>      </view>    </view>  </view></view>

js

Page({  data: {    SPACE_RANGE: ['', 'nbsp', 'ensp', 'emsp'],    rangeIndex: 1,    space: 'nbsp',    html: `<span>      <div        class="div_class"        style="line-height: 16px; color: red;"        id="div"      >        Hello&nbsp;World!1&emsp;2&ensp;3      </div>      <ol start="10">        <li>ol with 'start=10'</li>      </ol>      <tr colspan="1" rowSpan="2">case-insensitive</tr>      <img src="https://github.githubassets.com/images/icons/emoji/tada.png" style="width: 20px">    </span>`,    nodes: [      {        name: 'div',        attrs: {          class: 'div_class',          style: 'line-height: 16px; color: red;',          id: 'div'        },        children: [          {            type: 'text',            text: 'Hello&nbsp;World!1&emsp;2&ensp;3'          }        ]      }    ],    nodesStr: JSON.stringify([      {        name: 'div',        attrs: {          class: 'div_class',          style: 'line-height: 16px; color: red;',          id: 'div'        },        children: [          {            type: 'text',            text: 'Hello&nbsp;World!1&emsp;2&ensp;3'          }        ]      }    ], null, 2)  },  onPickChange(e) {    console.log('[rich-text] onPickChange', e);    const space = this.data.SPACE_RANGE[e.detail.value]    this.setData({      space,      rangeIndex: e.detail.value    })  },  onTextareaInput(e) {    this.setData({      html: e.detail.value    })  },  onRichTextTap(){    console.log(`[rich-text] bindtap`, e)  },  onRichTextLongPress(){    console.log(`[rich-text] onLongPress`, e)  },  onNodesChange(e) {    try {      const nodes = JSON.parse(e.detail.value)      console.log('[rich-text] onNodesChange', nodes);      this.setData({        nodes,        nodesStr: e.detail.value      })    } catch (error) {      console.log(error)    }  }})

Props#

PropertyTypeDefault ValueRequiredDescription
nodesarray/string[]trueNode list/HTML String
spacestringtextfalseDisplay continuous spaces

Valid values of nodes#

Now supports two types of nodes, distinguished by type, namely element nodes and text nodes, the default is element nodes, HTML nodes displayed in the rich text area.

type = node#

ValueTypeDescription
namestringtag name
attrsObjectattributes
childrenarraychildren of this element.

type = text#

ValueTypeDescription
textstringtext

Bug & Tip

  • tip: nodes Not recommended. String Type, performance will drop.
  • tip: Masking all node events within a component.
  • tip: attrs Property is not supported id Support class.
  • tip: name Property is not case sensitive.
  • tip: If an untrusted HTML node is used, the node and all its children are removed.
  • tip: img Tags only support web pictures
  • tip: If you use the rich-text Component, then only the custom component s wxss Style pair rich-text to hit the target class Entry into force.