【UE4从零开始 025】富文本

UE4中富文本的使用方式跟其他引擎有些区别。UE4中的富文本需要和一个数据表配套使用。在使用富文本之前，需要创建一个数据表资源。

1、创建数据表资源

创建数据表资源和创建其他资源一样，在 内容浏览器 中单击 新增（Add New），然后选择 其他（Miscellaneous） > 数据表（Data Table）。

当显示 选取结构（Pick Structure） 框时，您可以选择 富图像行（Rich Image Row） 或 富文本样式行**（Rich Text Style Row）**

2、添加富文本数据类型

1. 创建 数据表 资源后，双击以在 数据表编辑器 中打开。
2. 在 行编辑器（Row Editor） 面板中，单击 加号 “+” 图标以添加行。
3. 设置富文本样式或图片样式并命名。
   
   

3、使用富文本控件

在控件蓝图中，拖拽一个 富文本控件（Rich Text Block） 到 UI设计视图 中，在右侧 细节（Detail） 面板中的 外观（Appearance） 部分的 富文本样式设置（Text Style Set） 的下拉菜单中选择我们上面新建并编辑好的 数据表，然后在 内容（Content） 中输入我们想要的文本内容。格式为：<样式名字>内容1</><样式名字>内容2</>。如下：

在数据表中设计样式时，注意选择Font，否则可能不会正确显示文本内容。

4、富文本中添加图片

如果要向富文本中添加图片的话，除了我们在第二步中创建的数据表之外，还需额外的操作。

1. 创建一个 装饰器类（Decorator Class）
   
   依次点击上图中的 “+”， 在弹出的窗口中，选择存储目录并命名以创建一个蓝图类。
   
2. 修改父类为 RichTextBlockImageDecorator
   
3. 设置 Image Set 为我们在第二步中创建的 富文本图片数据表 然后保存并编译。
   
4. 在富文本内容中添加图片，格式为 “< img id=“ImageNameFromTable”/>” 。如下：
   
5. 重新编译控件之后即可看见效果。