Flex仿Word弹出式富文本编辑器

Posted by Kevin Luo at 6 July 2009

Category: 开源控件

Tags: , , ,

项目中我们有时会用到RichTextEditor来进行富文本编辑，但Flex的RichTextEditor有一个明显的缺点就是体积太大，使用起来很不方便。大家也许使用过微软Office的弹出式富文本编辑器，用户随意点击文本的任何一个位置会弹出一个文本编辑条，用户可以设置字体，颜色等等。今天贡献给大家的就是这么一个控件。可以在任意的TextArea中使用，使用方法非常简单。我们先来看看下面的Demo

请点击文本框

API：

控件共三个public的静态方法，用于绑定控件以及移除控件。
PopupRichTextToolBarManager.addTarget(textArea:TextArea) –将控制条绑定到目标控件
PopupRichTextToolBarManager。removeTarget(textArea:TextArea) — 移除绑定

例子

?View Code XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
	<![CDATA[
		import richtexttoolbar.PopupRichTextToolBarManager;
		private function init():void{
			PopupRichTextToolBarManager.addTarget(textArea);
			PopupRichTextToolBarManager.
		}
	]]>
</mx:Script>
    <mx:Label text="弹出式富文本编辑器Demo" horizontalCenter="0" top="10" fontSize="14" fontWeight="bold" />
	<mx:TextArea horizontalCenter="0" top="40" width="300" height="100" id="textArea" />
</mx:Application>

代码结构

控件由两个部分组成，PopupRichTextToolBar与PopupRichTextToolBarManager，PopupRichTextToolBar是控制条的主体部分，从Flex的RichTextEditor中剥离，PopupRichTextToolBarManager是控制器，用于绑定控件等操作。感兴趣的朋友可以更具需要对其修改

源代码


RichTextEditor ToolBar (597)

209 Comments

  1. fred says (7.07.2009 at 11:38 AM):

    你好 我想看看源码

    Reply

    aa Reply:
    August 12th, 2009 at 8:19 PM

    顶

    Reply

    ljjia Reply:
    August 24th, 2009 at 12:31 PM

    下载一下，THX

    Reply

    tang Reply:
    September 24th, 2009 at 9:55 PM

    good

  2. xinem says (7.07.2009 at 3:53 PM):

    不错的想法，最好是鼠标离开一定距离就自动消失。

    Reply

  3. wandyer says (8.07.2009 at 4:08 PM):

    很好…看看

    Reply

  4. hvhn says (9.07.2009 at 11:26 PM):

    vbvv

    Reply

  5. superD says (10.07.2009 at 10:10 AM):

    下来研究一下

    Reply

  6. lbn830 says (10.07.2009 at 3:38 PM):

    下载用下，3q

    Reply

  7. mqin says (11.07.2009 at 10:26 AM):

    好啊！！！

    Reply

  8. kitson says (13.07.2009 at 2:57 PM):

    you are so pro

    Reply

  9. ahui says (13.07.2009 at 8:50 PM):

    感谢,下载学习学习

    Reply

  10. kingwind says (14.07.2009 at 5:07 PM):

    很不错的东西啊

    Reply

  11. 坚持4 says (15.07.2009 at 3:43 PM):

    我要学习一下＾☉＾

    Reply

  12. junjun says (16.07.2009 at 10:11 AM):

    学习

    Reply

    Kevin Reply:
    July 16th, 2009 at 10:12 AM

    OK

    Reply

  13. TaoGOGO says (16.07.2009 at 10:37 AM):

    看看，用过flash没有用过flex~

    Reply

    Kevin Reply:
    July 16th, 2009 at 10:40 AM

    呵呵，试试看

    Reply

  14. aa says (16.07.2009 at 10:54 AM):

    恢复恢复

    Reply

  15. albert says (20.07.2009 at 9:06 AM):

    回复下，下来看看，看demo效果不错

    Reply

  16. help says (20.07.2009 at 4:32 PM):

    没办法要回复!

    Reply

    Kevin Reply:
    July 20th, 2009 at 6:03 PM

    非常鄙视这种又要拿别人东西还觉得自己很憋屈的人

    Reply

  17. mary says (21.07.2009 at 9:49 AM):

    下来看看

    Reply

  18. ny says (21.07.2009 at 1:33 PM):

    很好,很强大!

    Reply

  19. cnep says (23.07.2009 at 11:04 PM):

    大开眼界。

    Reply

  20. zqproject says (24.07.2009 at 11:04 AM):

    very nice

    Reply

  21. cooerson says (26.07.2009 at 6:07 PM):

    很不错啊，我要下！

    Reply

  22. 下下来看看 says (29.07.2009 at 12:14 AM):

    下下来看看

    Reply

  23. pop256 says (29.07.2009 at 9:29 AM):

    很不错啊，我要下！

    Reply

  24. bibikan says (29.07.2009 at 10:45 AM):

    不错呀 是什么代码开发的哟 下来看下

    Reply

  25. bo says (29.07.2009 at 12:29 PM):

    想看源代码

    Reply

    terry Reply:
    August 22nd, 2009 at 11:06 PM

    kankan

    Reply

  26. seed says (29.07.2009 at 3:35 PM):

    不错呀 是什么代码开发的哟 下来看下

    Reply

  27. Hello says (29.07.2009 at 10:34 PM):

    我要看看

    Reply

  28. ss says (30.07.2009 at 5:45 PM):

    hh

    Reply

  29. Thons says (31.07.2009 at 1:54 PM):

    回复看源码

    Reply

  30. 会不会 says (1.08.2009 at 8:07 AM):

    v发表vh

    Reply

  31. a says (1.08.2009 at 5:58 PM):

    很好

    Reply

  32. 仁心博客 says (4.08.2009 at 10:52 AM):

    好啊，这个东西好

    Reply

  33. sdf says (4.08.2009 at 10:54 AM):

    不错不错

    Reply

  34. zhaokai says (8.08.2009 at 2:15 PM):

    henhao a xieixie

    Reply

  35. huivp says (10.08.2009 at 1:29 PM):

    I want to see your source code! thanks!

    Reply

  36. 文西 says (12.08.2009 at 3:37 PM):

    呵呵，不错，正需要

    Reply

  37. liuxuan says (13.08.2009 at 9:32 AM):

    thank you

    Reply

  38. hsulee says (13.08.2009 at 1:18 PM):

    very good,w want to try it

    Reply

  39. li says (13.08.2009 at 4:07 PM):

    可惜不能加入word格式

    Reply

  40. ffff says (16.08.2009 at 9:24 PM):

    henhao

    Reply

  41. elnino says (20.08.2009 at 3:19 PM):

    很黄很暴力阿

    Reply

  42. huifu says (23.08.2009 at 12:24 PM):

    huifukekan

    Reply

  43. bb says (25.08.2009 at 11:02 AM):

    谢谢分享

    Reply

  44. djc says (25.08.2009 at 6:11 PM):

    look一下

    Reply

  45. ddd says (28.08.2009 at 2:46 PM):

    我要看源码

    Reply

  46. zhonghua says (2.09.2009 at 2:13 PM):

    GOOD

    Reply

  47. shadow says (3.09.2009 at 8:48 AM):

    看一下

    Reply

  48. sheldon says (3.09.2009 at 10:53 AM):

    let me c

    Reply

  49. muzaoniao says (4.09.2009 at 8:48 PM):

    我要学习一下＾☉＾

    Reply

  50. sdff says (6.09.2009 at 2:58 AM):

    fdsf

    Reply

  51. sdfds says (8.09.2009 at 9:34 AM):

    sdfdsf

    Reply

  52. xxggxx says (9.09.2009 at 10:01 AM):

    reer

    Reply

  53. FISH says (11.09.2009 at 11:26 AM):

    不错

    Reply

  54. adfasd says (11.09.2009 at 11:48 AM):

    asdfasd

    Reply

  55. 三六 says (11.09.2009 at 3:14 PM):

    謝謝

    Reply

  56. orchid says (13.09.2009 at 9:59 PM):

    谢谢前辈

    Reply

  57. jipu says (15.09.2009 at 3:15 AM):

    VERY GOOD!

    Reply

  58. claw says (15.09.2009 at 10:51 AM):

    ..

    Reply

  59. king says (15.09.2009 at 2:06 PM):

    很有意思

    Reply

  60. m says (15.09.2009 at 5:57 PM):

    Thanks

    Reply

  61. fdsa says (17.09.2009 at 2:35 PM):

    fas

    Reply

  62. fyzhao says (19.09.2009 at 1:12 AM):

    thank you very much!

    Reply

  63. 123d says (19.09.2009 at 1:19 AM):

    共产主义万岁！

    Reply

  64. fy says (19.09.2009 at 1:26 AM):

    thank you!

    Reply

  65. luguo says (21.09.2009 at 12:11 AM):

    good

    Reply

  66. sang says (21.09.2009 at 11:49 AM):

    good,good,good

    Reply

  67. Jiashou says (21.09.2009 at 1:50 PM):

    very good!

    Reply

  68. zhzh says (21.09.2009 at 3:09 PM):

    haohaohaohaohao

    Reply

  69. kevin says (21.09.2009 at 10:26 PM):

    不错。顶。

    Reply

  70. 好 says (22.09.2009 at 9:24 AM):

    haohaohaohaohao

    Reply

  71. star says (22.09.2009 at 2:14 PM):

    下下

    Reply

  72. Viking says (22.09.2009 at 3:32 PM):

    很强大…最近项目要用Flex…所以在研究….借鉴了….学习学习..

    Up…..Up…..UP

    Reply

  73. ztt says (23.09.2009 at 9:18 PM):

    谢谢，向你学习

    Reply

  74. tang says (24.09.2009 at 10:01 PM):

    好

    Reply

  75. UBU says (25.09.2009 at 1:22 AM):

    好

    Reply

  76. sheng says (25.09.2009 at 11:14 AM):

    good“`

    Reply

  77. bowen says (26.09.2009 at 12:47 PM):

    谢谢

    Reply

  78. 000ggg0 says (27.09.2009 at 9:14 AM):

    看看，学习

    Reply

  79. dfdsfd says (27.09.2009 at 10:21 AM):

    sdafsdfdsfsdf

    Reply

  80. asas says (27.09.2009 at 10:45 AM):

    Reply

    Reply

  81. Mchobits says (27.09.2009 at 11:30 AM):

    呵呵，很有意思哦

    Reply

  82. wty says (28.09.2009 at 11:06 PM):

    呵呵，很有意思哦

    Reply

  83. javier says (3.10.2009 at 12:15 PM):

    reply good!

    Reply

  84. asdasd says (10.10.2009 at 1:49 PM):

    sadasd

    Reply

  85. fd says (13.10.2009 at 4:00 PM):

    fasdfds

    Reply

  86. qin says (14.10.2009 at 12:35 AM):

    很有意思的空间呵呵

    Reply

  87. 电大 says (14.10.2009 at 3:15 PM):

    很有意思

    Reply

  88. nan2yi says (14.10.2009 at 10:48 PM):

    太棒了。谢谢分享。

    Reply

  89. wxy says (15.10.2009 at 3:08 PM):

    好东西

    Reply

  90. aa says (15.10.2009 at 4:49 PM):

    hao

    Reply

  91. youke says (16.10.2009 at 5:41 PM):

    thanks

    Reply

  92. bluedream says (19.10.2009 at 11:15 AM):

    这个东西太好了，感谢你的工作

    Reply

  93. scy says (19.10.2009 at 2:20 PM):

    shishikan

    Reply

  94. Samuel says (21.10.2009 at 11:28 AM):

    thnaks very much

    Reply

  95. try says (22.10.2009 at 7:00 PM):

    try

    Reply

  96. micecms says (24.10.2009 at 4:14 PM):

    下了，谢谢

    Reply

  97. DDDDDDDDDD says (27.10.2009 at 2:08 PM):

    DDDDDDDDDDDDDD

    Reply

  98. hendy says (28.10.2009 at 9:58 AM):

    太好了。谢谢

    Reply

  99. dyq says (29.10.2009 at 11:37 AM):

    good

    Reply

  100. huang says (29.10.2009 at 4:19 PM):

    good!!!

    Reply

  101. Zack says (31.10.2009 at 9:12 PM):

    TKS，学习，参观

    Reply

    karan Reply:
    December 10th, 2009 at 2:43 PM

    sfaf

    Reply

  102. ouzo says (4.11.2009 at 2:25 AM):

    看看

    Reply

  103. gesgseg says (5.11.2009 at 2:10 PM):

    afawpfawfawf

    Reply

  104. fffffffff says (5.11.2009 at 3:28 PM):

    f

    Reply

  105. sefs says (6.11.2009 at 3:09 PM):

    dfsfs

    Reply

  106. nowea says (9.11.2009 at 8:46 AM):

    我想写一个网络的WORD，希望提供个意见，如果有源代码可以发到我优先吗？nowea@qq.com

    Reply

  107. hah says (10.11.2009 at 2:49 PM):

    kankan

    Reply

  108. sss says (11.11.2009 at 1:34 PM):

    TRY

    Reply

  109. sdsd says (12.11.2009 at 4:57 PM):

    真是谢谢楼主了！

    Reply

  110. Jetson says (13.11.2009 at 2:13 PM):

    想找这个东西很久了，希望不要告诉我是flex自带那个编辑器。

    Reply

  111. asas says (14.11.2009 at 3:19 AM):

    卡结束了空间

    Reply

  112. gjd says (14.11.2009 at 10:45 AM):

    看看

    Reply

  113. leo says (16.11.2009 at 9:56 AM):

    thanks

    Reply

  114. xingq says (16.11.2009 at 10:15 AM):

    看看

    Reply

  115. leeo says (17.11.2009 at 12:52 PM):

    很有意思。。。

    Reply

  116. wayne says (19.11.2009 at 5:10 PM):

    有点意思，看看

    Reply

  117. xiaohezhiliu says (20.11.2009 at 11:23 AM):

    学习了

    Reply

  118. john810319 says (25.11.2009 at 2:16 PM):

    wwwww

    Reply

  119. lins says (26.11.2009 at 1:26 AM):

    thanks for sharing

    Reply

  120. Bestupon says (26.11.2009 at 3:18 PM):

    很好玩！看看！

    Reply

  121. li says (30.11.2009 at 3:51 PM):

    这个弹出位置不太对

    Reply

  122. xqd says (1.12.2009 at 10:27 AM):

    谢谢分享

    Reply

  123. m says (2.12.2009 at 6:46 PM):

    kankan

    Reply

  124. fzf says (3.12.2009 at 3:58 PM):

    谢谢。

    Reply

  125. smaril says (5.12.2009 at 12:21 PM):

    正在研究这一块，借签一下。

    Reply

  126. ancientmoon says (6.12.2009 at 2:14 PM):

    goog

    Reply

  127. srivatsa says (9.12.2009 at 12:59 PM):

    不错的想法

    Reply

  128. bx says (10.12.2009 at 8:53 AM):

    cool

    Reply

  129. marking says (10.12.2009 at 6:03 PM):

    Goods

    Reply

  130. huang says (11.12.2009 at 3:14 PM):

    很好

    Reply

  131. fio says (11.12.2009 at 3:55 PM):

    好象不错

    Reply

  132. aaa says (11.12.2009 at 4:39 PM):

    asdasda

    Reply

  133. xiashuke says (12.12.2009 at 3:17 PM):

    支持！！！！！！！！！！！！！！！！！

    Reply

  134. Free.Z says (12.12.2009 at 10:23 PM):

    学习了，呵呵

    Reply

  135. zhao says (14.12.2009 at 1:55 PM):

    试试

    Reply

  136. yang says (14.12.2009 at 8:00 PM):

    ?

    Reply

  137. Hoocoral says (15.12.2009 at 3:00 PM):

    刚好想做个类似东西

    Reply

  138. 紫竹 says (16.12.2009 at 5:13 PM):

    不错不错

    Reply

  139. sa says (17.12.2009 at 10:22 PM):

    sdf

    Reply

  140. newFlex says (21.12.2009 at 10:18 AM):

    学习下这个例子

    Reply

  141. 唧唧 says (22.12.2009 at 3:54 PM):

    正在学习 谢谢

    Reply

  142. wang says (23.12.2009 at 8:43 PM):

    正在学习 谢谢

    Reply

  143. 9012 says (25.12.2009 at 12:06 PM):

    good。

    Reply

  144. more.liu says (25.12.2009 at 5:57 PM):

    好强啊

    Reply

  145. prince says (26.12.2009 at 10:36 AM):

    喔 挺好的，拿走喽～

    Reply

  146. kenliu says (27.12.2009 at 9:50 PM):

    good

    Reply

  147. 333 says (28.12.2009 at 10:21 AM):

    good

    Reply

  148. good says (28.12.2009 at 3:21 PM):

    很實用

    Reply

  149. good says (29.12.2009 at 1:00 PM):

    正在为它庞大的体积而苦恼，感谢

    Reply

  150. xiaoxiao says (29.12.2009 at 4:00 PM):

    我正学习这方面的知识，谢谢楼主的分享

    Reply

  151. 哈哈雷 says (30.12.2009 at 9:56 AM):

    3q

    Reply

    尹小凯 Reply:
    January 27th, 2010 at 4:28 PM

    3q

    Reply

  152. 1 says (30.12.2009 at 11:18 AM):

    1

    Reply

  153. ddcfdw says (30.12.2009 at 5:20 PM):

    多谢

    Reply

  154. erwq3 says (31.12.2009 at 8:56 AM):

    ok

    Reply

  155. Flex玩手 says (31.12.2009 at 11:08 AM):

    太强了！

    Reply

  156. 梧桐雨 says (1.01.2010 at 10:12 AM):

    太好了

    Reply

  157. Qin says (4.01.2010 at 1:12 AM):

    嘿嘿 正在学习这个

    Reply

  158. zhu says (4.01.2010 at 3:14 PM):

    正在学习这个

    Reply

  159. feng says (6.01.2010 at 9:14 AM):

    学习学习。

    Reply

  160. jj says (6.01.2010 at 5:24 PM):

    good

    Reply

  161. star says (7.01.2010 at 9:35 AM):

    thanks

    Reply

  162. asdasd says (7.01.2010 at 1:23 PM):

    wqeq

    Reply

  163. aad says (7.01.2010 at 1:48 PM):

    very cool!

    Reply

  164. lingxia1du says (7.01.2010 at 4:36 PM):

    挺好的

    Reply

  165. champion says (8.01.2010 at 10:05 AM):

    so good， i want to learn it. thank you!

    Reply

  166. adan says (9.01.2010 at 3:34 PM):

    thanks

    Reply

  167. freebird says (9.01.2010 at 4:37 PM):

    经典

    Reply

  168. myjster says (9.01.2010 at 8:15 PM):

    非常不错！

    Reply

  169. shuixingzai says (10.01.2010 at 4:35 AM):

    还不错。支持一个

    Reply

  170. zwdjerry says (10.01.2010 at 12:07 PM):

    好东西,学习下

    Reply

  171. ewr says (11.01.2010 at 4:15 PM):

    rewwwwwwwww

    Reply

  172. Denis says (12.01.2010 at 9:53 PM):

    我要

    Reply

  173. Jack says (14.01.2010 at 5:52 PM):

    很不错 学习一下

    Reply

  174. Cathy says (14.01.2010 at 9:42 PM):

    that’s my want, 3Q

    Reply

  175. Jing says (15.01.2010 at 10:56 AM):

    支持一下，现在的项目可能可以用上

    Reply

  176. cherry says (15.01.2010 at 5:43 PM):

    多谢楼主啊！

    Reply

  177. floyd says (16.01.2010 at 10:53 AM):

    oo,ok

    Reply

  178. junzhu says (16.01.2010 at 9:00 PM):

    dd

    Reply

  179. junzhu says (16.01.2010 at 9:26 PM):

    good!!

    Reply

  180. xp says (17.01.2010 at 1:44 AM):

    3Q

    Reply

  181. skuser says (17.01.2010 at 12:23 PM):

    下载下来看看

    Reply

  182. LSLeon says (18.01.2010 at 11:13 AM):

    哈哈哈

    Reply

  183. tang says (19.01.2010 at 11:46 AM):

    谢谢

    Reply

  184. Jack says (19.01.2010 at 10:40 PM):

    这要看看 哈哈

    Reply

  185. xz says (22.01.2010 at 4:51 PM):

    c

    Reply

  186. r.king says (26.01.2010 at 11:41 AM):

    看下效果如何！

    Reply

  187. dfg says (27.01.2010 at 2:05 PM):

    ffffffffffffffffffffffffffffffffff

    Reply

  188. jiajia wang says (27.01.2010 at 3:23 PM):

    学习

    Reply

  189. tiandk says (28.01.2010 at 3:47 PM):

    thankyou 刚好解决我的问题 试试能不能控制弹出位置

    Reply

  190. tiandk says (28.01.2010 at 3:55 PM):

    下载不了，能不给我发一份源码，谢谢！tiandongk@163.com

    Reply

    Kevin Luo Reply:
    January 28th, 2010 at 3:58 PM

    下载不了？我刚试了可以阿

    Reply

  191. tiandk says (26.02.2010 at 9:33 AM):

    不过好像并没有保存修改后的字体样式啊。查出来的根本没有变化啊

    Reply

    Kevin Luo Reply:
    February 26th, 2010 at 9:38 AM

    需要高亮要改变字体的文字，再选择字体

    Reply

    tiandk Reply:
    February 26th, 2010 at 9:48 AM

    能说具体点吗？就是 我把字体修改成红色后，保存后，再查询出来不是红的啊

    Reply

    Kevin Luo Reply:
    February 26th, 2010 at 9:57 AM

    你是怎么保存的，你把他的htmlText保存出来，再设置回去就好了

    tiandk Reply:
    February 26th, 2010 at 10:02 AM

    我知道了！！不好意思啊，土了。。谢谢你啊

  192. Shanpeng says (15.03.2010 at 5:42 PM):

    非常不错！！！正好搜这方面的知识，参考参考~

    Reply

  193. 零式技术网 says (25.03.2010 at 1:06 PM):

    Good,很不错

    Reply

  194. russell says (1.05.2010 at 9:00 PM):

    效果不错啊，但是不知道为什么我导入项目后，编译的时候没有弹出工具条啊？

    请博主指教！

    Reply

  195. lv says (13.07.2010 at 9:28 AM):

    Louis Vuitton
    Gucci Shoes
    Hermes Handbags
    christian louboutin
    nike shoes
    replica bags
    Louis Vuitton
    Gucci Bags
    Cheap gucci shoes
    wholesale gucci shoes
    louis vuitton
    herve leger
    Rolex Watches
    Omega Watches
    louis vuitton multicolore
    louis vuitton vernis
    louis vuitton multicolore

    Reply

Leave a Reply

Leave a Reply
  • (required)
  • (required) (will not be published)