最近准备做一个聊天系统，开始准备使用cocos2dx的UIRichText控制显示屏聊天，在使用中发现的结果，cocos2dx的RichText很有限。全然不具备实现聊天的功能。仅仅实现了增加文本、图像和自己定义控件的功能。支持不同字体、颜色、字号。

我个人觉得。一个RichText控件应该具备下面基本功能：

1、多样化的文本显示功能，包含字体、颜色、字号的设置。

2、能显示图片以及一些特殊元素。

3、应该支持图片文字的超链接功能。

4、可以支持滚动的效果。

5、可以有非常方便的换行功能，最好能设置行间距。

假设可以更好的实现聊天的功能。我认为还须要增加下面功能：

1、文本特效：描边。下划线，阴影，发光等功能。

2、支持设置控件最大显示行数。

3、支持数据的分类显示，用于分频道显示聊天内容。

cocos2dx仅仅实现了基础的1和2功能，所以考虑之后还是决定自己写一个RichText控件。UIRichText的框架还是不错的，实现了文本分行显示的技术。在他的基础上非常easy扩展。

首先，扩展RichItem，用来支持多样化的文本需求。

其次，扩展Label控件，用于支持特殊的文字效果。

再次。须要实现滚动功能，控件继承UIScrollView。

最后，还须要对lua进行支持，包含使用功能以及超链接点击事件的注冊。

以上是我实现控件的思路。这里就不贴代码了。非常多。我会把我的控件代码共享给大家，大家在使用中有什么问题也能够向我咨询。

源码在这里，cocos2dx-3.0功能强大的richText控件

最后贴一下使用的代码和效果图吧！

使用代码例如以下，我是在lua里面使用的。大家能够參考一下：

function ChatUI:initRichEdit()

    local widget = self:getWidget()

    if widget then

        --创建小喇叭控件

        self._richBugle = ui.RichTextUI:create()

        self._richBugle:setSize(cc.size(940, 35))

        self._richBugle:setAnchorPoint(cc.p(0, 0))

        self._richBugle:setPosition(cc.p(100, 510))

        self._richBugle:setMaxLine(1)

        --创建聊天控件

        self._richChat= ui.RichTextUI:create()

        self._richChat:setSize(cc.size(940, 420))

        self._richChat:setAnchorPoint(cc.p(0, 0))

        self._richChat:setPosition(cc.p(20, 70))  

        widget:addChild(self._richBugle)

        widget:addChild(self._richChat)

        local function callback(sender, eventType)

			if eventType == ui.RICHTEXT_ANCHOR_CLICKED then

				print(">>>>>>>>>>>addEventListenerRichText")

			end

		end

		self._richChat:addEventListenerRichText(callback)

    end

end

function ChatUI:addChatMsg(channel, roleName, chatMsg, signs)

    local richText = (channel == Channel_ID_Bugle) and self._richBugle or self._richChat

    if richText and channel and roleName and chatMsg then

        local ChannelNameSwitch =

        {

            [Channel_ID_Team] = "【队伍】",

            [Channel_ID_Privacy] = "【私聊】",

            [Channel_ID_Faction] = "【帮会】",

            [Channel_ID_World] = "【世界】",

            [Channel_ID_System] = "【系统】"

        }

        local ChannelColor =

        {

            [Channel_ID_Team] = Color3B.ORANGE,

            [Channel_ID_Privacy] = Color3B.ORANGE,

            [Channel_ID_Faction] = Color3B.ORANGE,

            [Channel_ID_World] = Color3B.ORANGE,

            [Channel_ID_System] = Color3B.WHITE,

            [Channel_ID_Bugle] = Color3B.ORANGE

        }

        local linkColor = Color3B.YELLOW

        local linklineColor = Color4B.YELLOW

        local outlineColor = Color4B.BLACK  

        if channel == Channel_ID_Bugle then

            richText:insertNewLine()

        end

        if ChannelNameSwitch[channel] then

            local rc = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(ChannelNameSwitch[channel]), "DFYuanW7-GB2312.ttf", 25)

            rc:enableOutLine(outlineColor, 2)

            richText:insertElement(rc)

        end

        if channel ~= Channel_ID_System then

            local rcn = ui.RichItemText:create(channel, linkColor, 255, strg2u(roleName), "DFYuanW7-GB2312.ttf", 25)

            rcn:enableLinkLine(linklineColor, 1)

            rcn:enableOutLine(outlineColor, 2)

            richText:insertElement(rcn)

            chatMsg = ":" .. chatMsg

        end

        local rcm = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(chatMsg), "DFYuanW7-GB2312.ttf", 25)

        richText:insertElement(rcm)

        if channel ~= Channel_ID_Bugle then

            richText:insertNewLine()

        end

    end

end

function ChatUI:initComponent()

    self:addChatMsg(Channel_ID_Bugle, "王小二", "This is Bugle Msg")

    self:addChatMsg(Channel_ID_System, "", "This is System Msg")

    self:addChatMsg(Channel_ID_Team, "王小二", "This is Team Msg")

    self:addChatMsg(Channel_ID_World, "王小二", "This is World Msg")

    self:addChatMsg(Channel_ID_Faction, "王小二", "This is Faction Msg")

    self._channel = Channel_ID_World

    self:showChannel(Channel_ID_All)

    local btnChannel = self:getChild("Button_Channel")

	if btnChannel then

        btnChannel:setTitleText(strg2u("世界"))

    end

end

最后是效果图：