深度剖析 FairyGui 富文本：如何自定义 UBB 标签？

在 FairyGui 的富文本组件中，UBB 语法（统一论坛标记语言）发挥着至关重要的作用，它允许我们轻松地增强文本的样式、添加图片和创建超链接，从而实现图文混排。然而，默认的 UBB 标签集可能无法满足我们的所有需求。此时，自定义 UBB 标签便成了重中之重。本文将深入探讨如何在 FairyGui 中自定义 UBB 标签，助力你打造个性化且功能强大的文本处理体验。

FairyGui UBB 语法的基础

FairyGui 的 UBB 语法是一个基于标记的系统，它使用尖括号包裹的标签来指定文本的样式或插入其他元素。例如：

[b]加粗文本[/b]

上面这个标签会将包含的文本加粗显示。要深入了解 UBB 语法的基础知识，请参阅 FairyGui 官方文档。

自定义 UBB 标签的步骤

1. 注册自定义标签

自定义 UBB 标签的第一步是将其注册到 FairyGui 系统中。为此，需要修改 fairygui.d.ts 文件，并在 RichTextField 类中添加一个新的 UBBParser 类。代码如下：

export class RichTextField extends Component {
    ...
    public registerUBB(tagName: string, handler: IUBBParser): void;
    ...
}

public registerUBB(tagName: string, handler: IUBBParser): void {
    if (this._ubbParser == null)
        this._ubbParser = new UBBParser();
    this._ubbParser.register(tagName, handler);
}

2. 处理标签属性

在注册自定义标签时，我们可以指定一个 IUBBParser 接口的实现，该接口定义了处理标签属性的方法：

export interface IUBBParser {
    start(tagName: string, attr: Attributes, text: string): string;
    end(tagName: string): string;
    middle(tagName: string, attr: Attributes, text: string): string;
}

• start 方法在遇到标签的开始标记时被调用。它负责处理标签属性并返回要插入到文本中的 HTML。
• end 方法在遇到标签的结束标记时被调用。它用于清理任何由开始标签创建的 HTML。
• middle 方法在标签的开始标记和结束标记之间被调用。它可以用于处理标签内部的文本。

3. 创建复杂的标签

自定义 UBB 标签不仅限于简单的文本样式。我们可以创建更复杂的标签，例如插入图片、创建超链接或执行 JavaScript 代码。以下是创建自定义图像标签的示例：

export class ImageUBBParser implements IUBBParser {
    start(tagName: string, attr: Attributes, text: string): string {
        if (attr.url)
            return `<img src="${attr.url}" />`;
        return "";
    }

    end(tagName: string): string {
        return "";
    }

    middle(tagName: string, attr: Attributes, text: string): string {
        return "";
    }
}

此标签允许我们在文本中插入图像，只需使用 [image url="图片 URL"] 语法即可。

结语

自定义 UBB 标签为 FairyGui 的富文本组件提供了无限的可能性。通过遵循本文概述的步骤，你可以创建满足特定需求的自定义标签，从而增强文本处理能力并打造更具互动性和信息丰富的用户界面。从简单的文本样式到复杂的交互式元素，自定义 UBB 标签为 FairyGui 的文本处理功能赋予了新的高度。