---
order: 16
navTitle: 富文本
---
# SuperPage组件-富文本输入

富文本编辑器是所见即所得的文本编辑器，可输入文字，上传图片、视频、附件、表格等内容，可以方便用户编辑文章、通知公告等：

![富文本](./images/2020-11-26-18-55-38.png)

示例地址：[富文本输入](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%AF%8C%E6%96%87%E6%9C%AC)

## 使用富文本输入组件{#use}

富文本与Microsoft Word编辑功能类似，可设置多种文本格式，同时支持打印、预览等功能。提交数据与显示数据时需要搭配其它组件一起使用。

![操作步骤](./images/richtextinput.gif)

具体操作步骤如下：

1. **拖入富文本：** 在**组件区**>**输入**分组下将**富文本**组件拖入到画布中
2. **设置提交数据：** 在**富文本输入**>**数据**中勾选[提交数据](../../design/submit-data.md)，绑定存储富文本内容的clob字段，如`正文信息`，并在保存按钮组件中添加**提交表单**交互。
3. **设置附件存储：** 若需要上传图片、视频、附件，则需要勾选**允许插入图片**与**启用附件**属性，并绑定数据集，以及设置如下属性：
   - [数据集](#启用附件)：选择`上传附件_富文本`数据模型
   - [附件ID](#启用附件)：选择`附件唯一标识`字段
   - [文件名](#启用附件)：选择`附件名称`字段
   - [业务键](#启用附件)：选择`资源ID`字段，并设置对应计算公式

如果不指定独立的附件存储表，依旧可以上传图片，图片会以html内的base64编码方式存储，适合存储少量的小图片，但不支持上传视频和附件。
4\. **查看界面编辑富文本内容：** 在查看界面的富文本中输入文字信息、图片、视频等内容后，点击保存按钮即可将富文本数据提交到模型表中

富文本输入的内容存储的数据格式为html，在页面上显示富文本输入的内容，可以使用[HTML](../embed/embedhtml.md)组件。在**组件**>**数据**>**HTML来源**选择**字段**，在弹出的字段中选择存储富文本内容的clob字段，如`正文信息`即可。

## 属性介绍{#attribute}

### 启动附件{#startup}

当需要在富文本中上传附件或视频时，需要勾选**启用附件**并进行以下设置：

![启用附件](./images/2020-11-26-10-05-50.png)

1. 选择用于存储附件的数据表，由于一个富文本可以包含多个附件，所以用于存储附件的表是一个独立的模型表，和存储富文本HTML的表分离，这两个表会自动使用附件ID字段进行关联
2. 在以下附件属性设置中进行对应设置，其中附件ID、文件内容、业务键为必填项。

   - **附件ID**：用于存储上传附件的主键，必填项
   - **文件名**：用于存储上传附件的文件名称，系统自动处理获取上传文件的名称。当点击附件下载时，会显示对应附件的名称，对于上传附件为必填项，若只需上传图片可选填
   - **文件内容**：用于存储富文本中视频、附件以及图片当作附件存储时的文件内容，必填项。文件内容的存储方式由字段类型决定，提供了两种字段类型：
     - blob字段：存储附件内容对应的的二进制内容，必须设置[附件角色](../../../../data-gov/model/field-role.md)
     - 字符字段：存储附件在服务器工作目录下的相对路径，相对路径为`attachments/is7uMHE4jIIBRe7qs06gRG/PATH/附件ID`，必须设置[附件角色](../../../../data-gov/model/field-role.md)
   - **大小限制（MB/个**）：可限制上传的图片、视频与文件的大小，当上传附件超过该限制大小时，会弹出提示
   - **上传类型**：可限制上传附件文件的类型，支持无限制、图片、语音、视频、文档以及自定义
   - **业务键**：用于存储与该附件相关业务数据的ID，相当于外键，将附件内容与相关业务数据关联
   - **计算公式**：用于计算业务键的值，一般是富文本绑定模型对应主键ID的值

启用后富文本输入框的工具栏会出现对应插入视频与文件的按钮。上传的图片、视频和附件会存储在附件表，在HTML中只会记录附件的ID。

### 允许插入图片{#insertpic}

当需要在富文本中上传图片时，需要勾选**允许插入图片**，可使用以下两种方式存储：

1. 以base64编码方式直接存储在富文本HTML中，可直接上传图片，不需要其它设置
2. 图片较大时，可作为附件存储，需要勾选**图片当作附件存储**属性，其它设置与启用附件中一致

允许后富文本输入框的工具栏会出现插入图片的按钮，使用附件存储图片时，上传的图片会存储在附件表中。使用图片方式直接上传图片时会以图片原图显示，使用附件方式上传图片则以链接形式显示。

### 工具栏设置{#toolbar}

富文本除一些基本工具之外，还可以根据需求自定义添加多种工具，如插入图片、插入视频、插入附件、插入表格等，勾选对应的工具，将在富文本上方工具栏处出现对应工具的图标。在**属性栏**>**样式**>**工具栏**中勾选即可：

![工具栏](./images/2020-11-17-13-55-25.png)

## 应用场景{#scene}

### 文章管理{#article}

通过编辑富文本与显示富文本内容能够制作文章管理列表，通过新增与编辑按钮可对富文本内容进行新增和修改，保存按钮可提交富文本的数据到模型表中，点击列表标题可对富文本的内容使用HTML组件进行展示查看，具体制作方式可参考[提交数据](../../design/submit-data.md)，效果如下动图所示：

![文章管理](./images/wzgl.gif)

示例地址：[富文本-文章管理](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%AF%8C%E6%96%87%E6%9C%AC)