FairyGUI 的富文本组件中，支持 UBB 语法，我们可以通过它来很方便设置文本的样式，插入图片，超链接等，进行 图文混排。不过，很多时候内置的标签并不够用，需要我们自定义标签。

1. UBB 常用标签

普通文本不支持语法中的img、url标签，因为普通文本是不可以图文混排的。要支持图文混排，改为使用富文本。

1.1 图片

[img]image_url[/img]

显示一个图片

这里的 image_url 可以是 ui://包名/图片名 的内部url格式，也可以是一个外部资源的url。

图片最终是通过GLoader显示的，支持外部资源的能力可以参阅GLoader的文档。

在这里无法设置图片大小。如果需要需要设置图片大小，改用HTML语法。

1.2 超链接

[url=link_href]text[/url]

显示一个超级链接

其中 link_href 可以在链接点击后触发的事件里获得。

1.3 文本

• [b]text[/b] 设置文本为粗体。
• [i]text[/i] 设置文件为斜体。
• [u]text[/u] 设置文本为下划线。
• [color=#FFFFFF]text[/color] 设置文本颜色。注意一定要用十六进制颜色代码。
• [size=10]text[/size] 设置文本的字体大小。

2. 自定义标签

可以自定义 UBB 标签及解析方式。自定义 UBB 标签，实际上就是自定义一个解析规则，将 UBB 标签转换成一个 html 标签。

首先创建一个类，继承自 fgui.UBBParser ，然后在类里自定义标签及解析规则。示例代码如下：

// 自定义类 EmojiParser 继承自 fgui.UBBParser
export default class EmojiParser extends fgui.UBBParser {
    public constructor() {
        super();
        // 自定义 emoji 标签，及解析函数 onTag_Emoji()
        this._handlers["emoji"] = this.onTag_Emoji;
    }
    
    // tagName: 标签名，如 emoji
    // end: 标签是否结束，有的标签为[xxx][/xxx]两段
    // attr: 标签属性
    private onTag_Emoji(tagName: string, end: boolean, attr: string): string {
        if (!end) {
            // 根据 tagText 去包里获取资源 URL
            let src: string = fgui.UIPackage.getItemURL("Chat", this.getTagText(true));
            if (!src)
                return null;
            return "<img src='" + src + "' />";
        }
        else
            return null;
    }
}

使用的时候，

// 如下方式添加 emoji 标签，标签之间的 “hahaha” 为emoji在资源包里的名字
this._input.text += "[emoji]hahaha[/emoji]";

// 标签解析
//this._emojiParser = new EmojiParser();
this._richText.text = this._emojiParser.parse(this._input.text)

这样就完成了自定义标签 emoji 的使用了。

[emoji]hahaha[/emoji]
转换成了
<img src='ui://Chat/hahaha' />