富文本

<< Click to Display Table of Contents >>

当前位置:  制作可视化报告 > 辅助组件 

富文本

复制链接

1. 概述

1.1 功能简介

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

1.2 应用场景

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

2. 功能说明

2.1 添加富文本组件

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

richtext1

2.2 添加富文本内容

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

richtext2

添加普通文本

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

添加代码

点击richtext_code_icon代码图标可以在内容区域添加代码块,如下:

richtext3

添加媒体

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

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

richtext5

说明:

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

以上传网络图片为例:

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

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

richtext10

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

richtext11

4)插入后效果如下图:

richtext12

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

richtext13

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

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

richtext14

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

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

【居中】图片居中对齐。

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

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

richtext15

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

richtext16

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

添加超链接

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

richtext6

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

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

richtext18

添加表情

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

richtext7

添加时间

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

richtext8

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

richtext9

添加数据

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

数据

说明

参数

参数主要分为两大类:系统内置参数、报告参数。

richtext_parameters

其中用户信息、日期时间、流程审批相关参数由产品内置,相关用法,可参考内置参数的使用

richtext_system_parameters

报告参数来源于可以是用户报告中添加的组件参数、编辑参数、脚本参数等。

richtext_db_parameters

文本仪表

文本、仪表来源于用户报告中添加的文本、仪表组件。

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

richtext_inser_data_1

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

richtext_inser_data_4

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

richtext_inser_data_5

插入后的数据如下。

richtext_inser_data_2

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

richtext_inser_data_3

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

2.3 编辑富文本内容格式

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

richtext17

说明:

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