Flex the world » 富文本编辑器 http://www.flextheworld.com Flex, AIR, FMS, P2P and Things...... Fri, 10 Sep 2010 08:08:54 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Flex仿Word弹出式富文本编辑器 http://www.flextheworld.com/2009/07/flex-richtexttoolbar.html http://www.flextheworld.com/2009/07/flex-richtexttoolbar.html#comments Mon, 06 Jul 2009 13:52:39 +0000 Kevin Luo http://www.flextheworld.com/?p=546 项目中我们有时会用到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 (605)

]]> http://www.flextheworld.com/2009/07/flex-richtexttoolbar.html/feed 209