Flex的RichTextEditor控件中如何利用textAreaStyleName和letterSpacing设置字符间间隔大小的例子

接下来的例子演示了如何通过设置 textAreaStyleName和 letterSpacing风格，来设定RichTextEditor控件字符间的间隔大小。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Style>
8.         .myTextAreaStyleName {
9.             fontFamily: Courier;
10.             letterSpacing: 3; /* pixels */
11.         }
12.     </mx:Style>
14.     <mx:Script>
15.         <![CDATA[
16.             import mx.events.SliderEvent;
18.             private function slider_change(evt:SliderEvent):void {
19.                 var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myTextAreaStyleName");
20.                 cssStyle.setStyle("letterSpacing", evt.value);
21.             }
22.         ]]>
23.     </mx:Script>
25.     <mx:String id="str" source="lorem.txt" />
27.     <mx:ApplicationControlBar dock="true">
28.         <mx:Form styleName="plain">
29.             <mx:FormItem label="letterSpacing:">
30.                 <mx:HSlider id="slider"
31.                         minimum="0"
32.                         maximum="20"
33.                         value="3"
34.                         liveDragging="true"
35.                         snapInterval="1"
36.                         tickInterval="1"
37.                         change="slider_change(event);" />
38.             </mx:FormItem>
39.         </mx:Form>
40.     </mx:ApplicationControlBar>
42.     <mx:RichTextEditor id="richTextEditor"
43.             text="{str}"
44.             textAreaStyleName="myTextAreaStyleName"
45.             width="100%"
46.             height="100%" />
48. </mx:Application>