Flex HTML Rich Text Editor with ColdFusion

Posted: September 17, 2011 in ColdFusion, Flex

Need: I’ve had a long time need for an HTML WYSIWYG Editor embedded in my Adobe Flex Applications for content management.  Adobe does not provide a WYSIWYG Editor with Flex/Air and the Flex Text Layout Framework, frankly, was too confusing for me!  Some people offered components that attempted to do this in the past, like CKeditor, but they did not maintain it so that it works with Flex 4.5.1.  I decided to call on my long time friend, Adobe ColdFusion to do, as it always has, … make things easy!

GitRDone:  Leverage ColdFusion’s existing built in FCKeditor in CFTEXTAREA and Flex iFrame .  Build a simple ColdFusion page, load it into Flex via iFrame, and use Javascript to grab the HTML.  ColdFusion server required.

Source: http://www.fusionpage.com/flex/flexrta/bin/flexrta.html (view source enabled)

My solution of course was genius 🙂 … but code is very simple thanks to ColdFusion and the guys at Flex iFrame.  Appreciate it!

Here is the Flex code  and the ColdFusion code (rte.cfm).  The key was iFrame’s callIFrameFunction to bridge between actionscript and javascript to get the HTML from CF into Flex for saving to the database later when my Flex user submits the form.

Hope it helps!


<script type="text/javascript">
	
	function getText() {
		
		return ColdFusion.getElementValue('rta');
	}
	
</script>
<body>

	<cfform width="100%" height="100%" >
	<cftextarea name="rta" richtext="true"  width="600" height="600"   >
		
	</cftextarea>
</cfform>

</body>		

 

<fx:Script>
		<![CDATA[
			private function getTextFromFrame():void
			{
				myRtaFrame.callIFrameFunction('getText',null,getTextResult);
			}
			
			
			private function getTextResult(result : String):void
			{
				r.text = result;
			}
		]]>
	</fx:Script>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<flexiframe:IFrame  id="myRtaFrame" width="600" height="600" scrollPolicy="no" overlayDetection="true"   source="rte.cfm"/>
		<s:VGroup>
			<s:Button  label="Get HTML" click="getTextFromFrame()"/>
			<s:TextArea id="r" width="300" height="650"/>
		</s:VGroup>
Advertisements
Comments
  1. flextex says:

    If you want to load the HTML from your Flex app back into the CFTEXTAREA … it is kinda of hidden, undocumented CF secret. Use ajax function RichText.setValue .

    function loadText(htmlText){
    var taHtml = String(htmlText);
    var taId = document.forms[‘rtaForm’].elements[‘rta’].id;
    ColdFusion.RichText.setValue(taId, taHtml);

    }

    Don

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s