改变RichEditableText的LinkElement色彩并相应函数
改变RichEditableText的LinkElement颜色并相应函数
在Flex中,需要LinkElement来添加事件监听,但不能改变字体颜色,而SpanElement可以设置字体颜色,但是不能添加监听事件。解决方案就是将二者嵌套,如:
<p>Search for product info on <a><span color="#ff0000">Google</span></a></p>
详细代码如下:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ --> <s:Application name="Spark_RichText_text_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:local="*"> <fx:Script> <![CDATA[ import flashx.textLayout.conversion.TextConverter; import flashx.textLayout.elements.FlowElement; import flashx.textLayout.elements.FlowGroupElement; import flashx.textLayout.elements.LinkElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.events.FlowElementMouseEvent; import mx.controls.Alert; import spark.utils.TextFlowUtil; protected function button1_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub var d:String = '<p>The quick brown <span color="#ff0000">fox jumps over</span> the lazy dogg.</p>'; richTxt.textFlow = TextFlowUtil.importFromString(d); } private function handleClickEvent(e:FlowElementMouseEvent):void { Alert.show("dd"); } protected function button2_clickHandler(event:MouseEvent):void { var d:String = '<p>Search for product info on <a click="handleClickEvent(event)">Google</a></p>'; richTxt2.textFlow = TextConverter.importToFlow(d, TextConverter.TEXT_FIELD_HTML_FORMAT); } protected function button3_clickHandler(event:MouseEvent):void { var d:String = '<p>Search for product info on <a><span color="#ff0000">Google</span></a></p>'; //var d:String = '<p>Search for product info on <span color="#ff0000">Google</span></p>'; //richTxt2.textFlow = TextConverter.importToFlow(d, TextConverter.TEXT_FIELD_HTML_FORMAT); richTxt3.textFlow = addLinkClickHandler(d, handleClickEvent); } /** * Converts the html string (from the resources) into a TextFlow object * using the TextConverter class. Then it iterates through all the * elements in the TextFlow until it finds a LinkElement, and adds a * FlowElementMouseEvent.CLICK event handler to that Link Element. */ public static function addLinkClickHandler(html:String, linkClickedHandler:Function):TextFlow { //var textFlow:TextFlow = TextConverter.importToFlow(html, TextConverter.TEXT_FIELD_HTML_FORMAT); var textFlow:TextFlow = TextFlowUtil.importFromString(html); var link:LinkElement = findLinkElement(textFlow); if (link != null) { link.addEventListener(FlowElementMouseEvent.CLICK, linkClickedHandler, false, 0, true); } else { trace("Warning - couldn't find link tag in: " + html); } return textFlow; } /** * Finds the first LinkElement recursively and returns it. */ private static function findLinkElement(group:FlowGroupElement):LinkElement { var childGroups:Array = []; // First check all the child elements of the current group, // Also save any children that are FlowGroupElement for (var i:int = 0; i < group.numChildren; i++) { var element:FlowElement = group.getChildAt(i); if (element is LinkElement) { return (element as LinkElement); } else if (element is FlowGroupElement) { childGroups.push(element); } } // Recursively check the child FlowGroupElements now for (i = 0; i < childGroups.length; i++) { var childGroup:FlowGroupElement = childGroups[i]; var link:LinkElement = findLinkElement(childGroup); if (link != null) { return link; } } return null; } ]]> </fx:Script> <fx:Declarations> <fx:String id="htmlTextAsMarkup"><![CDATA[<p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>]]></fx:String> </fx:Declarations> <s:RichText id="richTxt" horizontalCenter="0" verticalCenter="0" /> <s:Button x="34" y="32" label="richtext" click="button1_clickHandler(event)"/> <s:RichEditableText top="70" editable="false" focusEnabled="false" id="richTxt2"> </s:RichEditableText> <local:HtmlLabel id="richTxt3" top="100"> </local:HtmlLabel> <s:Button x="130" y="32" label="RichEditableText" click="button2_clickHandler(event)"/> <s:Button x="258" y="32" label="htmlLabel" click="button3_clickHandler(event)"/> </s:Application>
组件HtmlLabel的代码如下:
<?xml version="1.0" encoding="utf-8"?> <s:RichEditableText xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" focusEnabled="false" selectable="false" editable="false"> <fx:Script> <![CDATA[ import flashx.textLayout.conversion.TextConverter; override public function set text(value:String):void { super.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT); } ]]> </fx:Script> </s:RichEditableText>
运行结果“Google”字符串字体变为红色,如下所示: