# 富文本组件设置

来源快照：`result_data_new_260518.json`

- 来源 ID：`1217312509124829185`
- 模块：通用设置
- 目录：管理员操作指南
- space ID：`1159151861511495737`
- 原文链接：未提供
- 产品基线：未提供

## 正文

一、

# 功能背景和价值用途

【富文本组件设置】页面用于统一配置富文本中图片、视频的上传方式、默认尺寸、对齐方式及是否允许插入网络视频等参数，支持解除图片宽高锁定、自由调整尺寸，并实现 PC 端与移动端功能同步，在兼容现有使用习惯的基础上，满足不同场景下的个性化编辑需求。

二、

# 功能说明

## 1 设置说明

如图1所示，【富文本组件设置】包含“插入图片功能”和“插入视频功能”两部分设置：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584470726860813&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图1

### 1.1 “插入图片”功能说明

 

1、

设置项【启用图片弹窗上传】默认不启用，即目前效果，富文本插入图片直接选择图片文件后即可插入到富文本组件；启用后，富文本组件使用【插入图片】按钮，为弹窗形式，可在弹窗中上传图片并设置图片属性，确定后再插入。

2、

【启用图片弹窗上传】开关启用后，可设置“默认图片尺寸”和“默认对齐方式”，如图2所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584466264121366&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图2

 

(1)

默认图片尺寸：原尺寸、自定义；选择“自定义”时，可配置自定义的宽高，如图3所示，默认兼容目前效果，选中“原尺寸”；宽度和高度至少要设置一项，如果只设置宽度，图片在显示的时候会根据宽度自动计算高度：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584457661186053&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图3

 

(2)

默认对齐方式：无、左对齐、居中对齐、右对齐，默认兼容目前效果，选中“无”。

3、【启用图片弹窗上传】开关关闭时：隐藏该组下方所有设置项。

 

### 1.2 “插入视频”功能说明

1、【启用视频弹窗上传】：默认开启（与目前线上效果保持一致），有直接上传需求的客户可以关闭。

2、【启用视频弹窗上传】开关启用时，可设置“默认视频尺寸”、“默认对齐方式”、是否“允许插入网络视频”：

（1）默认视频尺寸：原尺寸、自定义；选择“自定义”时，可配置自定义的宽高；默认兼容目前效果，选中“原尺寸”。

（2）默认对齐方式：无、左对齐、居中对齐、右对齐，默认兼容目前效果，选中“无”。

（3）允许插入网络视频：目前公共组件已支持插入网络视频，这里开放配置，需要的用户可以打开，默认不启用。

3、允许插入网络视频：目前公共组件已支持插入网络视频，这里开放配置，需要的用户可以打开，默认不启用。

4、【启用视频弹窗上传】开关关闭时，隐藏该组下方所有设置项。

 

## 2 前台效果

### 2.1 插入图片

1、【启用图片弹窗上传】开关未启用时，点击富文本组件的【插入图片】按钮，打开的是选择本地文件窗口，选择图片后可直接插入输入框，如图4所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584470642147336&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图4

(1)

如图5所示，支持横向纵向拖拽调整图片大小：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584461985103878&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图5

(2)

右键打开【图像属性】，可自行调整是锁定跨高还是自由调整，点击“![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584470726860822&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)”可切换解锁“![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584457661186059&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)”：

①

锁定状态下，调整宽度，自动联动高度调整；调整高度，自动联动宽度调整。

②

解锁状态下，可自由调整宽高。

(3)

“![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584470726860805&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)”按钮功能是“原图尺寸”，点击可恢复原图尺寸；如清空宽高，点击【确定】，等同于恢复原图尺寸。

2、【启用图片弹窗上传】开关启用时，点击富文本组件的【插入图片】按钮，将弹出上传文件窗口，如图6所示，图片尺寸、对齐方式默认值读取【通用设置/富文本组件设置】：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584466264121360&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图6

### 2.2 插入视频

  1、【启用视频弹窗上传】开关是默认启用的，点击富文本组件的【插入视频】按钮，将弹出“上传视频”窗口，如图7所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584453575933957&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图7

（1）启用【允许插入网络视频】后，可显示【网络视频】页签；未启用时，只能插入本地视频，不显示页签；网络视频页签如图8所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584461998096392&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图8

（2）

同插入图片功能，本地视频或网络视频均可配置“视频尺寸”和“对齐方式”，默认值读取【通用设置/富文本组件设置】。

2、【启用视频弹窗上传】开关关闭后，点击富文本组件的【插入视频】按钮，打开的是选择本地文件窗口，选择视频后可直接插入，如图9所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584453403557893&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图9

 

（1）

同插入图片功能，支持锁定宽高调整视频尺寸或解锁自由调整视频尺寸，如图10所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584470726860801&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图10

（2）

“![](https://weapp.eteams.cn/papi/file/preview?fileId=1245584470726860805&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)”图标提示“原视频尺寸”，点击可恢复原视频尺寸；如清空宽高，点击【确定】，等同于恢复原视频尺寸。

（3）插入的视频，同插入图片功能，可在右键【视频属性】中调整视频的尺寸和对齐方式。
