富文本 使用富文本块的高级文本样式

在处理游戏界面时，典型的UMG文本块提供了各种选项和自定义设置。然而，许多开发人员发现，需要更灵活的文本来支持样式更改、嵌入图像和超链接的标记。在实验性的富文本块控制中，上面的很多需求已经可以通过代码实现了。

在4.20版本中，该控件可以在UMG使用，并且其工作流程得到了改进，比以前更加灵活和可扩展。在改进过程中，我们没有试图支持开发人员可能需要的所有可能的定制，而是将富文本块设置为接受装饰器类，以便您可以定义项目所需的标记行为。您会发现我们提供了一个decorator类作为例子，它允许您通过richtextblockagedecorator.cpp设置自己的decorator。

在这篇博文中，我将从UI设计师和程序员的角度介绍如何在UMG使用新的富文本块控件。我将向您展示如何使用decorator类来扩展它的功能。在开始添加您自己的定制之前，最好先熟悉一下UMG新公开的富文本块功能。富文本块控件允许您自定义块内容，或者通过使用数据表资源的文本样式和装饰器，或者通过使用您自己的装饰器类。

您创建的数据表资源用于根据任何用户定义的结构存储任何类型的数据。创建数据表时，您会注意到提供了两种结构:文本样式行和图像行。文本样式行结构是富文本块提供的内置样式的一部分，它允许您定义字体类型，如轮廓、颜色类型和字体大小。图像行是所提供的RichTextBlockImageDecorator示例类的一部分，它允许您在富文本块控件中指定任何Decorator类。它类似于文本样式的线条结构，允许您定义嵌入图像的属性，如大小缩放、色调、对齐等。

您可以使用RichTextBlockImageDecorator类示例作为起点来创建您自己的标记文本，然后用您需要的任何Slate内容来替换它，包括图像、超链接甚至控件！数据表可以存储任何类型的数据，并且可以通过数据表资源在编辑器中进行设置。

初级课程

首先，我们需要创建一个新的控件蓝图，并使用调色板将富文本块拖到画布上。选择富文本块，并使用“详细信息”面板查找文本样式集。通过这个资源指定槽，我们可以传递样式数据表来定义文本样式和我们想要使用的任何数量的额外样式。您可以选择指定的下拉菜单并选择“数据表”，或者使用内容浏览器并选择“添加新项>:杂项>:数据表”来创建新的数据表。

创建数据表时，可以直接从UMG的“详细信息”面板中创建。从“选择结构”窗口和下拉菜单中选择“富文本样式行”作为行结构。

在UMG的“详细信息”面板或内容浏览器中，双击新创建的数据表将其打开。在数据表编辑器中，我们首先创建一个名为“默认”的新行。这一行代表默认状态下的文本。如果文本没有显式设置为另一种样式，富文本块将自动使用该文本。

探索新创建的默认行下的不同选项，并设置您想要用来设置字体类型、大小和字体的基准样式。设置选项后，单击加号按钮添加新行，然后在“行名称”文本框中输入名称以添加更多样式。

返回到分配有数据表资源的控件蓝图，并通过“详细信息”面板在富文本块的文本部分添加一些文本。

在UMG工具栏中，您可能需要单击编译按钮来显示富文本块控件中的文本。

这里的文本使用刚刚设置的默认行。若要应用在数据表资源中创建的其他样式，请使用以下格式将样式应用于换行文本:

& ltStyleName >文本<。/>。

在本例中，我们将在标记中包含继承数据表资源中Rich行的样式的文本。这样，文本现在将继承我们设置的属性，在这种情况下，橙色文本带有黑色轮廓。

应该记住，这个样式标签可以在没有任何前缀或后缀的情况下工作，并且不区分大小写。

使用装饰器

现在我们已经能够对富文本块中的文本应用不同的样式，但是如果我们想要插入一些其他的文本呢？我们可以使用decorator来设置自己的标记，以实现这个目标。这些标签使我们能够使用Slate无缝地呈现文本中的任何内容。

为了方便起见，我们包含了一个RichTextBlockImageDecorator类的例子，通过它您可以使用Decorator类向富文本块添加图像。像富文本样式行的内置样式一样，富图像行结构定义了您希望在嵌入文本中支持的所有图像。

现在，我们继续扩展所提供的RichTextBlockImageDecorator类，以便子类指向刚刚创建的富图像行数据表。最简单的方法是创建一个新的蓝图类，选择提供的RichTextBlockImageDecorator类作为父类，打开蓝图，将数据表分配给该类的Image Set属性。

请注意，在4.20中，图像装饰器不会出现在父类列表中，但在4.21中会得到支持。目前，您可以将其扩展到一个C++类，并在C++文件中指定您的数据表，或者在标题顶部的UCLASS宏中添加Blueprintable，将子类扩展到蓝图。

设置装饰器后，将其添加到富文本块的装饰器类数组中，并在表格中插入带有以下标记的图像:

<img id="ImageNameFromTable"/>& ltimg id="ImageNameFromTable"/>。

为了使更改生效，您可能需要单击工具栏中的“编译”按钮。

添加新的装饰器

虽然我们提供了RichTextBlockImageDecorator类作为例子，但是富文本块最强大的一点是，您现在可以定义自己的自定义Decorator来充分利用Slate，这样您就可以在文本中嵌入任何内容。为此，您需要编写两个类:URichTextBlockDecorator和FRichTextDecorator。在设置了这两个类之后，您可以使用UMG的富文本块控件，通过DecoratorClasses数组向任何富文本块添加装饰器。您也可以使用标签通过装饰器解析文本。

URichTextBlockDecorator定义了UObject类，它可以向编辑器的细节面板公开属性。至少你需要实现CreateDecorator，它应该将SharedPtr返回到你将要创建的FRichTextDecorator实例，以执行所有繁重的任务。您还可以在这里实现任何属性和实用函数，这样设计人员就可以创建您的装饰子类，作为传输他们需要的任何数据的蓝图。大家还记得，RichTextBlockImageDecorator定义了数据表属性，这样我们就可以在图像表中传递它们。蓝图中要修改的任何内容都应该存在于UObject中。

FRichTextDecorator负责标签的实际解析/替换，需要实现两个功能。第一个函数Supports将通过FTextRunParseResults获取标记的内容，并根据装饰器是否实际负责处理标记返回true或false。将为DecoratorClasses数组中的每个装饰器调用支持，然后，如果没有找到处理标记的装饰器，则后退以将标记显示为普通文本。调用第二个函数CreateDecoratorWidget，通过替换支持的标记来实际构造和返回控件。如果您的标记需要包含任何文本或元数据，您可以访问FTextRunInfo。

以RichTextBlockImageDecorator类为例，我们定义SRichInlineImage控件，在传递给UObject包装类的数据表中填充正确的图像，然后作为CreatorDecoratorWidget的返回值传递。

在项目中使用富文本

我们已经介绍了如何使用富文本块的内置特性，以及如何编写装饰器类来添加您自己的特性。现在，您如何将此功能应用到您的工作流程中？

如果您发现每次创建富文本块时，都会设置一个包含相同装饰器集合的装饰器类数组，那么拥有一个包含一组默认装饰器的富文本控件子类可能会很有用。如果您需要更多的控制，SRich文本块还支持自定义解析器和Marshall。您可以编写自己的解析器来更改如何检测和处理标记的规则，并且可以通过使用自定义Marshall来控制控件中文本的布局。

虽然在所有项目文本区域中使用富文本块很方便，但是在搜索标签时解析文本会产生相关的性能成本。如果性能是一个不可忽视的问题，那么在不需要富文本块的额外功能时，就需要继续使用普通文本块。

富文本块控件为您将有趣的效果应用到项目文本带来了许多可能性。有了它，你可以应用简单的效果，比如文本高亮和手柄按钮，或者更多的交互效果，比如嵌入式按钮和战利品链接，而有了decorator，你可以添加任何你能想象的效果！

点击阅读原文以访问我们的富文本块文档，深入探索并开始使用它！