提取富文本里得图片_小程序实践：基础内容之rich-text，如何单击预览rich-text中的图片并保存？...

目录

1）主要属性
2）示例与最佳实践
​
相关问题：
​
1）如何保存rich-text富文本组件中的图片？
2）在富文本rich-text中，如何解决图片之间的间距问题？
3）富文本rich-text里面怎么插入ad广告标签?如何将html文本直接解析呈现？
4）rich-text中的图片能点击放大吗?
5）rich-text 解析富文本，图片过大，如何自定义大小？
6）rich-text怎么识别回车符？
7）rich-text不解析iframe标签？
8）rich-text的文本支持selectable吗？
9）如何使用rich-text处理视频的问题？
10）使用rich-text如何处理特殊类型的图片，例如data类型的url？
11）rich-text中如何显示云存储中的图片？

本文9840字，阅读9分钟，实践30分钟

文 / 石桥码农

rich-text是富文本组件。

1）主要属性

属性说明name节点名称，例如p、div、span、img等，大部分html标签都受支持，就连html5的ruby标签也支持attrs节点的属性，是定义在html标签上的属性，例如img标签的src属性children子节点列表，数组type节点类型，默认是node，可以不写，这时可以有children属性；如果是text，则只有一个text属性，只能包括纯文本space空格显示策略，有三种值，在中文环境直接取“emsp”就好，代表显示中文字符空格的大小。

2）示例与最佳实践

Wxml:

<rich-text space="emsp" nodes="{{nodes}}" bindtap="tap"></rich-text

js:

nodes: [{
  name: 'div',
  attrs: {
    class: 'div_class',
    style: 'line-height: 20px;padding:20px;'
  },
  children: [{
    type: 'text',
    text: '中文Hello World!'
  },{
    name: 'span',
    attrs:{
      style: 'color: green;'
    },
    children: [{
      type: 'text',
      text: 'message'
    }]
  },{
    name:'img',
    attrs:{
      src:'https://www.yishulun.com/favicon.ico',
      style:'width:30px'
    }
  },{
    name:'img',
    attrs:{
      src:'https://www.yishulun.com/images/qrcode.png',
      style:'width:100px'
    }
  }]
}]

使用rich-text组件，关键在于nodes的编写。

nodes是一个数组，数组中每个元素可以是复合的node节点，也可以是末节的text节点。简单分辨节点类型的方法，可以看节点有没有name属性，name代表标签名称，如果有name，代表是复合节点；如果没有，并且有type属性为”text”，代表是简单的文本节点。

当是text节点时，例如这个：

{
  type: 'text',
  text: 'message'
}

它代表的是最基本的文本，没有样式，它所有的样式都来自父节点的设定。在vue或wxml的模板中，类似于：

{{message}}

这样的一个纯文本节点，解析到虚拟DOM列表中，都是一个独立的节点。在nodes列表里的type为“text”的节点，与它们类似的，也是一个纯文本节点。

当是非text节点，必有一个name属性，例如：

{
    name:'img',
    attrs:{
      src:'https://www.yishulun.com/favicon.ico',
      style:'width:30px'
    }
  }

这相当于是一个img标签，翻译为html代码相当于：

<img src="https://www.yishulun.com/favicon.ico" style='width:30px'/>

从mdn文档上可以查到img标签还有其它属性，例如width、height、alt、ismap、longdesc、usemap等。这些html定义的属性原则上都可以在nodes里定义，但是在使用前，最好先查一下微信小程序rich-text组件的文档：

http://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

这里有一个受信任的HTML节点及属性列表，看看拟用的属性在不在受支持的范围。如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。

下面看看相关问题：略

好了，我是石桥码农，今天的分享就到这里。有什么问题欢迎留言，也欢迎群内讨论。

2020年03月28日