Flex3 - 高亮文本框中一段文字
作者:hangge | 2015-03-03 10:25
下面是一个可以高亮TextArea中某一段文字背景的组件,使用时只需要传入需要高亮的文字起始,结束位置索引即可。


组件使用:
HighlightTest.zip
(注意:如果文本区域有滚动条,则滚动后需重新设置高亮)
效果图如下:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundColor="0xffffff"
applicationComplete="initApp();"
xmlns:highlight="highlight.*">
<mx:Script>
<![CDATA[
import mx.events.ScrollEvent;
import mx.managers.ToolTipManager;
private var updateTimer:Timer;
private function initApp():void
{
ToolTipManager.showDelay = 0;
//timer
updateTimer = new Timer(5, 1);
updateTimer.addEventListener(TimerEvent.TIMER, validate, false, 0, true);
lightText.addEventListener(ScrollEvent.SCROLL, scrollEvent);
lightText.htmlText = "Documentation for classes includes syntax, " +
"<b><font size='18'>usage</font></b> information, and code samples for methods, " +
"properties, " +
"in ActionScript (as opposed to global functions or properties). " +
"The <font size='24'>classes</font> are listed alphabetically. " +
"If you are not sure to which class a certain method or property belongs, " +
"you can look it up in the Index.";
beginIndexInput.text = "43";
endIndexInput.text = "200";
}
private function showBlock():void
{
lightText.showBlock(parseInt(beginIndexInput.text), parseInt(endIndexInput.text));
}
//validate
private function validate(event:TimerEvent):void
{
showBlock();
}
//scrollEvent
private function scrollEvent(event:ScrollEvent):void
{
updateBlock();
}
//更新
private function updateBlock():void
{
updateTimer.reset();
updateTimer.start();
}
]]>
</mx:Script>
<highlight:BlockTextArea id="lightText" width="300" height="100" y="10" x="10"/>
<mx:Button x="10" y="148" label="Show Highlight" click="showBlock();"/>
<mx:TextInput id="beginIndexInput" x="92" y="118" width="60"/>
<mx:TextInput id="endIndexInput" x="232" y="118" width="60"/>
<mx:Label x="10" y="121" text="beginIndex:"/>
<mx:Label x="160" y="121" text="endIndex:"/>
</mx:Application>
组件下载:
全部评论(0)