微信小程序富文本 rich-text组件

拼搏现实的明天。 2021-09-07 23:22 615阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

富文本。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">nodes</td> 
   <td align="left">array/string</td> 
   <td align="left">[]</td> 
   <td align="left">否</td> 
   <td align="left">节点列表/HTML String</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.4.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">space</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">显示连续空格</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.4.1</a></td> 
  </tr> 
 </tbody> 
</table>

**space 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ensp</td> 
   <td align="left">中文字符空格一半大小</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">emsp</td> 
   <td align="left">中文字符空格大小</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">nbsp</td> 
   <td align="left">根据字体设置的空格大小</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**nodes**

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

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
   <th align="left">类型</th> 
   <th align="left">必填</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">name</td> 
   <td align="left">标签名</td> 
   <td align="left">string</td> 
   <td align="left">是</td> 
   <td align="left">支持部分受信任的 HTML 节点</td> 
  </tr> 
  <tr> 
   <td align="left">attrs</td> 
   <td align="left">属性</td> 
   <td align="left">object</td> 
   <td align="left">否</td> 
   <td align="left">支持部分受信任的属性，遵循 Pascal 命名法</td> 
  </tr> 
  <tr> 
   <td align="left">children</td> 
   <td align="left">子节点列表</td> 
   <td align="left">array</td> 
   <td align="left">否</td> 
   <td align="left">结构和 nodes 一致</td> 
  </tr> 
 </tbody> 
</table>

*文本节点：type = text*\*

**受信任的HTML节点及属性**

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

<table> 
 <thead> 
  <tr> 
   <th align="left">节点</th> 
   <th align="left">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">a</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">abbr</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">address</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">article</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">aside</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">b</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bdi</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bdo</td> 
   <td align="left">dir</td> 
  </tr> 
  <tr> 
   <td align="left">big</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">blockquote</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">br</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">caption</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">cite</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">code</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">col</td> 
   <td align="left">span，width</td> 
  </tr> 
  <tr> 
   <td align="left">colgroup</td> 
   <td align="left">span，width</td> 
  </tr> 
  <tr> 
   <td align="left">dd</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">del</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">div</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">dl</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">dt</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">em</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">fieldset</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">font</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">footer</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">h1</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">h2</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">h3</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">h4</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">h5</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">h6</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">header</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">hr</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">i</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">img</td> 
   <td align="left">alt，src，height，width</td> 
  </tr> 
  <tr> 
   <td align="left">ins</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">label</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">legend</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">li</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">mark</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">nav</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">ol</td> 
   <td align="left">start，type</td> 
  </tr> 
  <tr> 
   <td align="left">p</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">pre</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">q</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">rt</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">ruby</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">s</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">section</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">small</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">span</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">strong</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">sub</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">sup</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">table</td> 
   <td align="left">width</td> 
  </tr> 
  <tr> 
   <td align="left">tbody</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">td</td> 
   <td align="left">colspan，height，rowspan，width</td> 
  </tr> 
  <tr> 
   <td align="left">tfoot</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">th</td> 
   <td align="left">colspan，height，rowspan，width</td> 
  </tr> 
  <tr> 
   <td align="left">thead</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">tr</td> 
   <td align="left">colspan，height，rowspan，width</td> 
  </tr> 
  <tr> 
   <td align="left">tt</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">u</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">ul</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**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 生效。

**示例代码**

[在开发者工具中预览效果][Link 1]

index.js

Page({ 
      data: { 
        html: '<div class="div_class" style="line-height: 60px; color: red;">Hello World!</div>',
        nodes: [{ 
          name: 'div',
          attrs: { 
            class: 'div_class',
            style: 'line-height: 60px; color: red;'
          },
          children: [{ 
            type: 'text',
            text: 'Hello World!'
          }]
        }]
      },
      tap() { 
        console.log('tap')
      }
    })

index.wxml

<view class="page-body">
      <view class="page-section">
        <view class="page-section-title">传入html字符串</view>
        <view class="rich-text-wrp">
          <rich-text nodes="{ {html}}" bindtap="tap"></rich-text>
        </view>
      </view>
    
      <view class="page-section">
        <view class="page-section-title">传入节点列表</view>
        <view class="rich-text-wrp">
          <rich-text nodes="{ {nodes}}" bindtap="tap"></rich-text>
        </view>
      </view>
    </view>

index.wxss

rich-text { 
      width: 700rpx;
      padding: 25rpx 0;
    }
    
    .rich-text-wrp { 
      padding: 0 25rpx;
      background-color: #fff;
    }
    
    .page-section{ 
      width: 100%;
      margin-bottom: 60rpx;
    }
    
    .page-section:last-child{ 
      margin-bottom: 0;
    }
    
    .page-section-title{ 
      font-size: 28rpx;
      color: #999999;
      margin-bottom: 10rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
    }

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beg5Rl1B-1621996395023)(image-20210526093753137.png)\]][img-beg5Rl1B-1621996395023_image-20210526093753137.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/s/zPVmpim46wYQ
[img-beg5Rl1B-1621996395023_image-20210526093753137.png]: /images/20210716/86f7932cd57d400faf2622afdfe3e4ac.png