`

在RichEditableText的LinkElement上添加自定义函数

    博客分类:
  • Flex
阅读更多

在Flex中,如何实现在一段文字上某部分字符上显示超链接,点击后显示自定义操作呢?如下:

<?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.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>Google</a></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 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"即弹出对话框,完成了自定义操作的实现。

  • 大小: 3.7 KB
分享到:
评论

相关推荐

    VB函数添加大师 V2.2

    使用时请先将VB安装目录下原LINK.EXE改名为LINK2.EXE,再将本程序复制过去,在编译DLL时本程序会自动显示出DLL内的函数列表,在选择需要的函数后,点击“生成带参数ActiveXDLL”按钮就可以完成添加工作了。...

    VB函数添加大师 1.95

    使用VB作为开发工具的朋友,应该都知道VB的IDE不支持对AciveDLL添加输出函数的方法.这样的DLL文件只能采用"引用"的办法来用.有没有办法让它像普通DLL一样拥有输出函数呢?请使用本程序吧!它能让你ActiveDLL内的函数...

    complie和link函数

    NULL 博文链接:https://2873665969.iteye.com/blog/2323279

    android自定义控件LinkTextView实现

    android自定义控件LinkTextView实现

    VB制作可调用函数的DLL教程

    使用VB作为开发工具的朋友,应该都知道VB的IDE不支持对AciveDLL添加 ...制过去,在编译DLL时本程序会自动显示出DLL内“模块”里的函数列表,在 选择需要的函数后,点击“生成DLL”按钮就可以完成添加工作了。

    HeaderEditor:管理浏览器的请求,包括修改请求头和响应头,重定向请求,取消请求

    关于权限标头编辑器需要这些权限: 标签:打开链接或切换到标签webRequest,webRequestBlocking, all_urls :修改请求contextMenus:在右键菜单中添加anti-hot-link 无限存储空间:存储规则和设置下载:导出规则...

    J-Link V8可自定义SN固件烧录

    J-Link V8内有详细的固件烧录步骤说明,请详细按照步骤操作

    【Android-Activity】RecyclerView自定义viewHolder的实现

    RecyclerView的优势还在于他可以自定义itemView,来实现不同的view,实现效果(根据position的不同来展示不同的... 自定义的viewholder在创建adapter的时候是不需要泛型了!直接继承RecyclerView.Adapter即可! Adapte

    Docker如何添加自定义网桥

    Docker服务进程在启动的时候会生成一个名为docker0的网桥,容器默认都会挂载到该网桥下,但是我们可以通过添加docker启动参数-b Birdge 或更改docker配置文件来选择使用哪个网桥。 操作系统:centos7 删除docker0...

    J-Link固件烧写详解Win7、XP环境

    其实只是因为软件版本太旧了,经过多方摸索终于在Win7上成功烧写固件,修好之前坏了的四个J-Link。。。网上对于在Win7环境下烧写J-Link固件的方法写得不是很详细,压缩包中含有详细方法。还有短接时间其实不用像文件...

    LabVIEW与外部程序间DLL文件的调用

    DLL(动态链接库)文件是Dynamic Link Library 的缩写形式,是一种允许程序共享 执行特殊任务所必需的代码和其他资源的可执行文件。其多数情况下是带有DLL 扩展名的文 件,但也可能是EXE 或其他扩展名。Windows 提供...

    DLL函数查看器3.7

    动态链接库英文为DLL,是Dynamic Link Library 的缩写形式,DLL是一个包含可由多个程序同时使用的代码和数据的库,DLL不是可执行文件。动态链接提供了一种方法,使进程可以调用不属于其可执行代码的函数。函数的可...

    VB生成真正的dll,生成有导出函数的dll,link.exe下载

    VB制作有导出函数的DLL, 默认vb生成的dll没有输出函数, 原因是在连接时没有指明, 所以我们自己写一个程序替换原来的link.exe, 就是在连接时处理一下就可以了。 把下载的link.exe替换原来的link.exe

    精通Windows.API-函数、接口、编程实例.pdf

    3.3.7 在Platform SDK的基础上使用nmake 56 3.4 使用WinDbg调试 57 3.4.1 安装WinDbg 57 3.4.2 编译可调试的程序 58 3.4.3 WinDbg命令 59 3.4.4 调试过程演示 59 3.5 集成开发环境 Visual Studio 62 ...

    address-autocomplete:用于将地址键入(或口述)到一个字段中并从推荐验证列表中选择到自定义函数中的 Web 组件

    在主机站点上填写表格。 演示: 在查看 用途 &lt; head &gt; &lt; script src =" bower_components/webcomponentsjs/webcomponents-lite.js " &gt; &lt;/ script &gt; &lt; link rel =" import " href =" ...

    linkFunction:将输入值链接到函数中

    熟悉:这只是一个功能,可以完成您手动完成的工作独立:一个功能,没有依赖关系,可在任何地方使用目录学分执照 安装npm install --save linkfunction UMD版本也可以在unpkg上获得: &lt; script src =" //unpkg....

    jQuery仿微信公众号自定义菜单界面操作代码.zip

    代码片段: &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; ...jQuery仿微信公众号自定义菜单界面操作代码&lt;...link rel="stylesheet" href="assets/css/bootstrap...自定义菜单&lt;/h3&gt;

    Ckeditor自定义插件

    CKeditor 自定义插件 需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数。

    PHP实现把文本中的URL转换为链接的auolink()函数分享

    其实我在《把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数》一文中介绍过PHP代码如何实现将URL地址转化成链接的方法,今天给大家介绍一个更加简洁的版本,先来看看PHP的源代码: auolink() API 复制...

    java使用自定义注解处理器实现自动化文档生成.txt

    在Java中,注解是一种元数据,可以附加到类、方法、字段等元素上,以提供额外的信息。而注解处理器则是一种工具,可以在编译时扫描和处理这些注解,并根据注解的信息生成相应的文档。 在这个例子中,我们定义了一...

Global site tag (gtag.js) - Google Analytics