2.3 富文本rich-text简介：如何单击预览节点图片并保存？

片 1

在富文本组件 rich-text 中，节点的事件是被屏蔽的，例如节点里面的图片，它的单击事件，我们是不能监听的。那么，在这种情况下，我们如何实现点击预览节点图片，并保存它们呢？

片 2

我们先看一下 rich-text 这个组件。

上面是它的示例代码。它只有两个属性：nodes 与 space。space 代表空格策略，控制中文空格显示的大小，有三种值，在中文环境直接取 emsp 就好。另一个属性 nodes 节点，可以取字符串，也可以取数组，但如果是字符串的话会影响性能，所以一般情况下我们都使用数组。

在 nodes 属性中，有这样一些子属性。name 表示节点名称，例如 p、div、span、img 等，大部分 HTML 标签都受支持，就连 HTML5 不太常用的 ruby 标签也支持。ruby 是一个在字符上方，显示东亚字符拼音文本的标签。attrs 表示节点的属性，是定义在 HTML 标签上的属性，例如 img 标签的 src、width、height 属性等等这些都是。children 代表子节点列表，它是一个数组。type 代表节点类型，共有两种，node 与 text。默认是 node，可以不写。当类型是 node 时，有 children 属性；如果是 text，则只有一个 text 属性，text 节点只能包括纯文本。

片 3

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

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

当是 text 节点时（见上面代码），它代表的是最基本的文本，没有样式，它所有的样式都来自父节点的设定。在 vue 或 WXML 的模板中，它类似于带花括号的{{message}}这样一个纯文本节点。解析到虚拟 DOM 列表中，都是一个独立的节点，都是可以直接改变内容的。

如果不是 text 节点，必须有一个 name 属性，例如一个 img 节点（见上面的代码）。这相当于是一个 img HTML 标签，可以翻译为对等的 HTML 代码（见上面代码）。

从 mdn 文档上可以查到，img 标签还有其它属性，例如 width、height、alt、ismap、longdesc、usemap 等。这些 HTML 定义的属性，原则上都可以在 node 里定义，但是在使用前，我们最好先查一下微信小程序 rich-text 组件的文档（见上面链接）。里面有一个受信任的 HTML 节点及属性列表，看看我们准备使用的属性，在不在支持的范围里。如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。不是忽略，而是被移除，这可能会造成不易被发现的 bug。

下面我们看开发中可能遇到的相关技术问题。

片 4

如果可以拿到单击事件，以事件的 currentTarget 取到目标组件，再判断目标组件是不是 image，如果是，取其 src 属性拿到图片链接，就可以预览、下载图片。