<< Click to Display Table of Contents >> 当前位置:  制作可视化报告 > 辅助组件  富文本 复制链接

1. 概述

1.1 功能简介

富文本组件可以方便地编辑富文本内容，包括添加图片、超链接、视频，设置文本格式等。这个章节主要介绍如何创建富文本、如何编辑富文本内容和其中的交互功能。

1.2 应用场景

在报告中添加图片、超链接、视频，设置文本格式、添加参数等。

2. 功能说明

2.1 添加富文本组件

从右侧【组件 > 辅助组件】选择“富文本”，拖入画布即可；

2.2 添加富文本内容

根据富文本组件上的提示信息双击输入文本或点击右侧【格式>编辑】，在“编辑”弹窗中设置内容，如下图。您可以在富文本的内容区域直接输入文本内容，也可以插入代码、媒体、超链接、表情、时间、数据。

•添加普通文本

在弹窗内可以直接输入文本内容，通过上方的工具栏按钮设置文本格式，详情参考设置富文本格式。

• 添加代码

点击代码图标可以在内容区域添加代码块，如下：

•添加媒体

在报告内添加图片、音频、视频等媒体资源，仅支持网络资源。

点击媒体图标，在弹出的“媒体库”弹窗中切换选择图片、音频、视频，并输入资源地址。

➢说明：

添加路径时需要是资源后缀，比如MP4、MP3、PNG、image格式等，不能是html。

以上传网络图片为例：

1）在网上找到一张图片，复制图片链接，例如：https://p9.toutiaoimg.com/img/pgc-image/327942d809784ceda7e96539068c504f~tplv-tt-shrink:640:0.image。

2）选择图片，如果要给上传文件命名，需要以“资源名称|资源地址”的格式输入，例如流量分析，样式如下图：

3）点击确认后，会在媒体库中生成缩略图，选中上传的媒体， 点击插入所选项目按钮媒体添加到富文本的内容区域，可以点击右上角的“删除选择项目”删除媒体，也可以添加图标上传多个网络媒体，如下图所示。

4）插入后效果如下图：

5）插入的图片可以设置文字环绕方式、对齐、链接、调整宽高等，鼠标移入图片，会显示功能按钮，如下图：

功能按钮依次为文字在右、文字在左、左对齐、居中、右对齐、链接、调整大小、删除；

【文字在右】文字和图片在同一行时，文字统一显示在右侧，如下图：

【文字在左】文字和图片在同一行时，文字统一显示在左侧。

【左对齐】图片居左对齐。

【居中】图片居中对齐。

【右对齐】图片居右对齐。

【链接】可以输入网址，在本窗口或新窗口跳转到对应链接，例如要实现：点击图片，在新窗口打开永洪BI官网https://www.yonghongtech.com，设置如下图：

【调整大小】点击图片尺寸图标后，会显示当前图片宽高，您可以自定义输入数值调整大小，如下图：

【删除图片】点击删除图标后删除选中的图片。

•添加超链接

点击超链接图标，添加一个超链接，超链接必须带有协议名称，比如http、https。

添加完成的超链接，鼠标悬浮于超链接上变为手型。点击超链接后，默认跳转到新窗口中打开。您可以点击关闭按钮，查看报告时，富文本中的超链接可以在本窗口中打开。

您可以点击超链接弹框左下角的“移除链接”，也可以在添加超链接后，单击清除链接图标，将超链接转换为普通文本。

•添加表情

点击表情图标，添加内置表情到富文本内容区域。

•添加时间

点击时间图标，添加日期时间到富文本内容区域中，同步显示当前时间。

您可以通过下拉按钮，在下拉列表的多种时间格式中选择其中一种，如下图。

•添加数据

点击插入数据图标，在第一个下拉列表选择富文本的数据来源：参数、文本仪表，具体说明，请参考下表。

如富文本中有如下信息，需要填写用户和销量具体的信息。

在“用户：”后点击插入数据图标选择【参数 >内置用户信息>?{_USER_}:用户名参数】，点击【确定】。

再在“销量：”后点击插入数据图标，选择【文本仪表 > 图表3】，点击【确定】。

插入后的数据如下。

点击【应用】，关闭编辑弹框，富文本中数据如下。

富文本可与参数关联实现数据联动，详情请参考参数 > 典型使用场景 >富文本 。

2.3 编辑富文本内容格式

支持设置富文本的文字字体、文字字号、内容样式、文字间距、文字行高、文字样式（加粗、斜体、下划线、删除线、文字颜色、文字背景色、文字对齐方式（左对齐、居中对齐、右对齐、两端对齐）。

➢说明：

在设置下划线、删除线前，请先设置文字颜色，下划线、删除线颜色会跟随文字颜色。