图文混排 RichTextField 组件
今天在Google code上看到一个很好用的图文混排组件,名字叫做 RichTextField。地址在这里http://code.google.com/p/riaidea/wiki/RichTextField
作者的想法很好。但他所说 “RichTextField是一个实现图文混编的AS3组件,特别适合像QQ那样的聊天组件需要。”。如果要像QQ一样的聊天功能,则需要将前台的内容传送到后台,再由后台服务器端进行传播,传送前必须进行打包,至于将表情如何打包,也有多种做法。
但是我找了半天没找到一个方法,可以将该组件的内容转换成可以进行传输的数据。于是动手修改了一下,将表情转换成特殊字符串,再进行传输,我比较喜欢这种做法,可以让传输的数据变得更小一点。想看原版的就上Google code,需要到转换功能的就下文章最后的Demo。↓ 解释一下,我新加进去的几个方法:
1.添加了converRichToString方法,将RichTextField控件的内容,包括表情,转换成字符串,可供Socket或者其他方式传输。
2.添加了converStringToRich方法,将converRichToString转换成的字符串再转换成能使RichTextField控件识别的对象。
3.重写了set visible方法。我发现如果需要再某个情况下,将RichTextField隐藏起来的话,RichTextField机制里面的表情容器不会隐藏。
顺便说一下,Demo里面只是模拟了一下服务器广播,并没有真正使用到服务器端。为了运行起来更方便。 ![]()
RichTextField可转换版Demo下载
<-----------华丽的分割线------------>
有童鞋提及到能不能实现类似QQ聊天,自动识别URL转换成超链接。刚好今天有空,我又修改了一下,通过正则表达式判断超类接,再进行转换。
正则可能并不能符合某些特殊要求童鞋的胃口,见机行事咯。
Demo在这里 图文混排 – 自识别超链接版
原文链接:http://flex.desizen.com/richtextfield/





tianzhu (2009/09/09)
输入框中,输入哦行数过多时会出现bug,
warmC (2009/09/10)
@tianzhu: 你所说的输入行数过多,是指多少行?聊天的话,多少都会限制字数的。这个得自己去判断。
hmg0427 (2009/09/22)
那个类能不能实现超连接啊,就像QQ那样,当你发送了一个类似网址时,在输出面板变成一个连接,可以跳转@@ 知道的话,麻烦给个思路,可以发到我的邮箱里面哦,谢谢!
warmC (2009/09/22)
@hmg0427: 这样的效果首先自己写个继承TextField的类,重写appendText和set text两个方法,用正则进行url查找转换成Html,然后和原来的text合并,显示为HtmlText。会很麻烦,而且难!
joel (2009/09/22)
这是不是说明:warmC很牛啦?!哈哈哈哈
warmC (2009/09/23)
warmC (2009/09/23)
果然,信春哥,无难事。出来了 …
hmg0427 (2009/10/05)
谢谢你的来信哦!那个我就用正则表达式查出URL格式,然后把它添加到Sprite,再对它做点击侦听,就实现了,呵呵!这样也可以做字体格式什么的!
古卧猫王 (2010/02/23)
同时删除多个表情的时候会出现BUG
会有部分表情删除不掉(不是每次都会出现的BUG)没找到具体原因…
貌似是框选的时候没正确获得begin和end指针
古卧猫王 (2010/02/23)
解决同时删除多个表情的时候会出现的BUG了
只要多加一个
_textfield.addEventListener(MouseEvent.MOUSE_MOVE, getSelectionHandler);
监听就OK了
txiejun (2010/04/02)
当输入的东西为文字和表情 的多次混合后 自动换行会导致bug ;导致表情和替换的占位符号不能一一对应
Amy (2010/04/19)
那个类能不能实现超连接啊,就像QQ那样,当你发送了一个类似网址时,在输出面板变成一个连接,可以跳转@@ 知道的话,麻烦给个思路,可以发到我的邮箱里面哦,谢谢!
warmC (2010/04/20)
@Amy: Demo在这里图文混排 – 自识别超链接版
路人甲 (2010/04/23)
其实还有好的方法,也许一切更简单~
http://www.6dn.cn/blog/article.asp?id=148