【界面UI】RichText图文混排：行会公告的表情与图标内嵌

纯文字公告表达力有限，行会招人、活动预告都需要内嵌表情与道具图标。996引擎前端提供RichText富文本控件，支持在一段文字里混排图片。本文以行会公告面板为例讲解标签用法与排版细节。

场景与痛点

行会会长需要在公告里放置道具图标展示奖励、插入表情增加亲和力。用多个图片控件手工拼版，文字一换行全部错位。富文本控件让图文在同一文本流里自动排版，会长只需要编辑一段带标签的字符串。

实现思路

RichText解析类HTML标签：color标签改颜色，img标签内嵌图片。公告数据存服务端行会变量，客户端打开行会面板时读取并塞进富文本控件，换行符转成br标签，图标用约定占位符替换。

关键实现

local rich = GUI:RichText_Create(win, "guildNotice", 12, 220)
GUI:RichText_SetFontSize(rich, 16)
GUI:setContentSize(rich, 380, 120)
local function showNotice(text)
    local s = string.gsub(text, "\n", "<br>")
    s = string.gsub(s, "#%[(%d+)%]", "<img src='res/private/notice_icon/%1.png' />")
    GUI:RichText_SetText(rich, s)
end

服务端公告示例串：今晚八点集合攻沙#[2]，奖励#[3]人人有份。方括号里的数字是约定俗成的图标占位符，客户端统一替换成img标签。

GUI:addOnClickEvent(btnSave, function()
    local text = GUI:TextInput_GetText(inputNotice)
    if text == "" then
        SL:ShowSystemTips("公告内容不能为空")
        return
    end
    SL:SendNetMsg(9121, { notice = text })
end)

保存走自定义协议号9121发回服务端，由后端校验会长权限后写入行会变量。

细节与避坑

img标签的src路径必须用单引号，双引号会截断标签解析。图标尺寸控制在二十像素内，过大会把行高撑乱。富文本对连续空格不敏感，需要缩进时用全角空格。文本长度要做上限校验，服务端截断到两百字符，防止恶意长串刷屏。颜色标签嵌套不要超过两层，解析器对深层嵌套支持有限。

小结

富文本把图文排版从手工拼版变成字符串编辑，策划与会长都能自助维护内容。占位符方案让不熟悉标签的运营人员也能写出图文混排公告。

延伸思考

可以把占位符扩展到动态数据：占位符显示行会人数、下次攻沙倒计时，公告从静态文本升级为实时信息面板。配合点击标签打开超链接，还能做公告内直达报名入口。