Browse > Home > Flash CS3/AS3 > FP9下的图文混编组件RichTextField 2.0

| Subcribe via RSS

FP9下的图文混编组件RichTextField 2.0

八月 25th, 2010 | 1 views | Posted by flashlizi in Flash CS3/AS3

RichTextField是一个基于TextField的图文混编的组件。跟上一个版本相比,新版重写了显示元素的渲染方法,效率得到提升;增加了对html文本的支持;还可以导入和导出XML格式的内容,方便保存和传输等等。

功能演示:

项目首页: http://code.google.com/p/richtextfield
下载地址:http://code.google.com/p/richtextfield/downloads/list
API文档:http://www.riaidea.com/projects/richtextfield/api/

欢迎提交任何bug和建议。

29 Responses to “FP9下的图文混编组件RichTextField 2.0”

  1. FP9下的图文混编的组件RichTextField 2.0 - Flash_Actionscript_Flex_Air_开发者社区 Says:

    [...] FP9下的图文混编的组件RichTextField 2.0 RIAidea – Focus on Flash/Flex/AIR 关注快报 RIAidea – Focus on Flash/Flex/AIR 更多 这篇问答/快报还没有所属的栏目,你觉得应该归类到哪个栏目: ActionScript 语言 AIR 程序开发 FLASH CS 软件使用 FLEX 应用程序开发 企业应用 对纬度网的建议和意见 工具、组件、框架和代码库 服务器技术 活动、资讯、聊天和灌水 游戏开发 特效和图像处理 [...]


  2. 陈瑞斌 Says:

    您好,提交一个bug,输入框输入量打的时候,图片就会消失,您测试一下


  3. 陈瑞斌 Says:

    能给出flv或者fxp的源码例子最好,O(∩_∩)O谢谢


  4. lfg929 Says:

    您好,

    var xml:XML = richTextField.exportXML();
    richtTextRiend.clear();
    richtTextField.importXML(xml);

    这样操作以后,表情错位了


  5. flashlizi Says:

    谢谢反馈,bug已经修正,你可以到此项目的google code的svn去更新修正版本。


  6. 小天蝎 Says:

    我现在使用flex4 textlayout做聊天表情符,但遇到如何传输表情符到远端聊天窗口的困难。

    你的示例可以导出xml和导入xml,很方便传输和再次显示,但我在flex里按你的doc文档编写,发现好多方法都不存在了。

    请问在flex4里是否能使用?有例子吗?


  7. wood Says:

    您好!
    我已经把BUG发给您的邮箱了,怎么还没有回复!
    很严重的BUG!


  8. zjh Says:

    因为输入框有可能有只需要显示单行,并且又同时需要在输入框显示表情的变态需求。 所以当我尝试把文本设置成单行显示并且不允许换行时,发现表情不会随着超出的文字横向位移,暂时我解决的办法是在SpriteRenderer 修改此方法为:
    private function doRender():void{
    _spriteContainer.y = -textRenderer.scrollHeight;
    renderVisibleSprites();
    }
    问题暂时得以解决。

    另外,如果用现在的组件实现多人聊天功能的话,那么传输过程中必须为xml格式,如果此消息需要发送给一个普通的文本框显示,那么直接显示的是xml文档,不是非常直观。而且,有些地方输入框并不需要将表情显示出来,只需要在输出窗口 将表情显示出来,所以,我加了几个方法,能让组件导出和解析纯文本格式,如:

    测试字符[符号1]1]2[[3[符号2]4]5[[[符号3]]]6]]7][符号4]]8]]90

    其中[符号1][符号2] 此类符号表示一个表情。 我将我加的方法写出来,期待官方版本

    在RichTextField.as 中添加方法
    public function AppendText(value:String=”"):void {

    var TextString:String=”"
    var lastindex:int = -1
    var spritesArray:Array = new Array()
    var obj:Object
    for (var i:int = 0; i 1) arr.sortOn(“index”, Array.NUMERIC);

    for (var i:int = arr.length-1; i >=0; i–)
    {
    var node:String = “-["+arr[i].src+”]-”;
    var index:int=parseInt(arr[i].index)
    var xml:String = “”
    var txtfmt:TextFormat = textfield.getTextFormat(index, index+1)

    xml += ” ”
    xml += node

    xml+=”"
    xml += “”

    textfield.insertXMLText(index,index,xml)
    }

    if (_rtf.html)
    {
    return textfield.htmlText.split(_rtf._placeholder).join(“”);
    }else
    {
    return textfield.text.split(_rtf._placeholder).join(“”);
    }

    delete textfield
    textfield=null

    }

    并且在RichTextField中添加方法:

    public function exportText():String
    {

    return _spriteRenderer.exportText()

    }

    通过 input1.AppendText(input2.exportText()) 可以将input2的内容以纯文本的方式传递给input1


  9. zjh Says:

    中间的某些内容似乎被截断了?
    接下面这句重来。
    在RichTextField.as 中添加方法
    public function AppendText(value:String=”"):void {

    var TextString:String=”"
    var lastindex:int = -1
    var spritesArray:Array = new Array()
    var obj:Object
    for (var i:int = 0; i 1) arr.sortOn(“index”, Array.NUMERIC);

    for (var i:int = arr.length-1; i >=0; i–)
    {
    var node:String = “-[" + arr[i].src + “]-”;
    //两边的- – 短横线不知道为什么,不加上的 话[ ] 两符号没有了。
    var index:int=parseInt(arr[i].index)
    var xml:String = “”
    var txtfmt:TextFormat = textfield.getTextFormat(index, index+1)

    xml += ” ”
    xml += node

    xml+=”"
    xml += “”

    textfield.insertXMLText(index,index,xml)
    }

    if (_rtf.html)
    {
    return textfield.htmlText.split(_rtf._placeholder).join(“”);
    }else
    {
    return textfield.text.split(_rtf._placeholder).join(“”);
    }

    delete textfield
    textfield=null

    }

    并且在RichTextField中添加方法:
    public function exportText():String
    {
    return _spriteRenderer.exportText()
    }

    通过 input1.AppendText(input2.exportText()) 可以将input2的内容以纯文本的方式传递给input1

    希望这次能发布成功


  10. flashlizi Says:

    谢谢你的补充。首先,对于超长单行的问题,只要把SpriteRender的renderSprite方法中设置sprite的x坐标的方法减去textRenderer.scrollH就可以了,我已经更新到google code的svn上了。第二,输出格式的问题,其实RTF是非常开放的,默认输出xml是为了更加直观。开发者可以根据自己的需要实现自己的输入输出格式,不过不建议直接修改RichTextField类,推荐做法是参照ShortcutPlugin写一个实现插件来实现。


  11. flashlizi Says:

    你好,RTF是纯AS3项目,没有专门的针对flex的版本。但实际上只要把RTF封装到一个UIComponent里就可以了。使用方法可完全参照我们的例子。


  12. z Says:

    发现一个bug 当你输入 一个字符+一个表情+一个字符的时候, 显示出来的东西变成 两字符+一个表情。


  13. frpg Says:

    你好将下面这段文字拷贝到输入框中,会出现后面的字母直接跑到下一行的问题,不知道有没有什么解决办法?盼解答,谢谢!!
    黑暗之剑 sssggddggggggggggggggg理了理了离开解决的sssssssssssssssssssss


  14. flashlizi Says:

    你这个属于textfield默认行为,解决办法就是手动控制。因为英文一般没有这么长的单词的。


  15. sunix Says:

    你好,我对你的表情初始化部分感到好奇,能给出表情的fla吗。因为我的表情是直接读取的gif图片,所以出现了很多奇怪的问题。


  16. flashlizi Says:

    我例子中表情用的是fla中的mc,没有另外加载。动态加载gif的话要自己写方法处理。


  17. 星空 Says:

    十二月 19th, 2010 at 23:18
    发现一个bug 当你输入 一个字符+一个表情+一个字符的时候, 显示出来的东西变成 两字符+一个表情。

    这个问题作者好像没有解决?


  18. flashlizi Says:

    不好意思,最近一直没抽出时间来解决这个bug。


  19. andyshang Says:

    great component!

    报告一个bug,单行输入文本的情况,当输入的文字超过文本框宽度的时候图片会错位。
    SpriteRenderer::renderSprite方法中

    var rect:Rectangle = textRenderer.getCharBoundaries(index);
    //getCharBoundaries是不计算scrollH的,加上scrollH的影响,
    //结果还不错的样子
    //should calculate the scrollH of the textField
    rect.x -= textRenderer.scrollH;


  20. flashlizi Says:

    此组件默认是自动换行的多行文本形式,所以并没考虑单行文本。你这种情况就需要考虑scrollH了。


  21. test Says:

    bug啊。。。FLEX AIR 中,封装在UIComponent的RTF不能输入中文啊,复制粘贴可以显示,就是输入法不能用。。发布出来别的机器上也不行。,
    第二个BUG。。。。先输入一行字发送,然后用textformat后面的字,第一行输出的字回跟着变了格式。。(大小和颜色没变,粗体等跟着变)


  22. chris Says:

    如果要新增表情符號款式~該如何新增呢?
    可否請作者提供smileys.fla檔呢??謝謝~~


  23. zzp Says:

    如果在一行文字中, 前面一段是中文后面一段是英文,在超出要自动换行时会出现截断,中文在一行英文在一行, 中文后面是空白的, 要怎么解决啊 ??
    例如:

    这一行前面是中文
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    出现这样的情况


  24. style Says:

    您好,目前的版本是类似qq那样的显示

    可以像网游的那种聊天框实现吗, 在输入框中 不需要显示图像,用快捷字母代替,输出框用将快捷码转成图片,如果这样实现该怎么修改呢


  25. yl Says:

    你好,提个建议,能不能添加一个功能是复制时连图片也一起复制,如果能实现,也一同说下实现的过程,谢谢


  26. gyuhia Says:

    发现一个bug 当你输入 一个字符+一个表情+一个字符的时候, 显示出来的东西变成 两字符+一个表情。

    这个问题作者好像没有解决?

    期待解决…..


  27. 大喜 Says:

    你好!如果要改成网游的那种聊天出入转义字符然后实现图片的显示应该怎么做?


  28. 大喜 Says:

    大侠我怎么下载不到呢!你能发我邮箱吗?谢谢
    yangdaxi1987@163.com


  29. bobo Says:

    你好。我在sdk4.1下测试正常,换用sdk4.6布局就会混乱,能修正一下吗?


Leave a Reply