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>
FlexTex 
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