In Flex 3 we had a RichTextEditor, however it was nothing like the WYSIWYG Text and HTML Editors .

Adobe released an open source to their advanced editor:
http://opensource.adobe.com/wiki/display/tlf/Text+Layout+Framework

That code is a good starting point, however I found it to be over complicated and laking some features. I am attaching here my implementation of the advanced editor based on Adobe’s source code. I am sure some of you will find it useful.

Implementation is simple, see here:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600"
			   xmlns:textEditor="view.textEditor.*">

	<textEditor:TextLayoutEditorCanvas id="textLayoutEditorCanvas"
									   x="0" y="0"
									   width="150" height="20"/>

	<textEditor:TextEditorTools id="textEditorTools" x="250"
								activeFlow="{textLayoutEditorCanvas.activeFlow}"/>

</s:Application>

Source code click here.

I have a need to use a spell check on a TLF component.

I choose Squiggly since it seems a solid product, unfortunately it seems that currently Squiggly Prerelease 4 doesn’t support TLF as of today.

See here:
http://forums.adobe.com/message/2773334#2773334

I am pretty sure that in the near future Adobe will add support for TLF, meanwhile if you look for a quick way of using TLF without doing the entire spell check process manually, as shown in the forums by richardleggettmk — keep reading.

The idea is to have a TLF component, open a popup with only the copy pasted into a mx:TextArea component, which support Squiggly. Than allow the user to do a spell check and return the text back to the TLF component so you don’t lose formatting such as bold, indent or any other of the goodies coming with TLF.

Main MXML class:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.ConversionType;
			import flashx.textLayout.conversion.ITextExporter;
			import flashx.textLayout.conversion.ITextImporter;
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.elements.TextFlow;

			import mx.controls.Alert;

			protected function button_clickHandler():void
			{
				var spellCheckPopup:SpellCheckerPopup = new SpellCheckerPopup();
				spellCheckPopup.x = 50;
				spellCheckPopup.y = 50;
				spellCheckPopup.spellCheckText = ta.text;
				spellCheckPopup.xmlExport = getXmlExportHTML(ta.textFlow);

				spellCheckPopup.closeButton.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
					popupPlaceHolder.removeAllElements();
				});

				spellCheckPopup.completeCheckSpelling.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
					popupPlaceHolder.removeAllElements();

					var textImporter:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
					var source:XML = spellCheckPopup.xmlExport;
					var newFlow:TextFlow = textImporter.importToFlow(source);

					if (textImporter.errors != null &&
						textImporter.errors.length > 0)
						Alert.show( textImporter.errors.toString() );

					ta.textFlow = newFlow;
				});

				popupPlaceHolder.addElement( spellCheckPopup );
			}

			private function getXmlExportHTML(activeFlow:TextFlow):XML
			{
				var exporter:ITextExporter = TextConverter.getExporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
				var xmlExport:XML = exporter.export(activeFlow, ConversionType.XML_TYPE) as XML;

				return xmlExport;
			}

		]]>
	</fx:Script>

	<s:Button label="Spell Check" y="220" click="button_clickHandler()"/>

	<s:TextArea id="ta" width="300" height="200" />
	<s:Group id="popupPlaceHolder" />

</s:Application>

SpellCheckerPopup.mxml:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="344" height="236"
		 initialize="init();">

	<fx:Script>
		<![CDATA[
			import com.adobe.linguistics.spelling.SpellUI;

			[Bindable]
			public var spellCheckText:String;

			[Bindable]
			public var xmlExport:XML;

			private var preWords:Array = null;

			public function init():void
			{
				SpellUI.enableSpelling(textArea, "en_US");
			}

			private function onUpdateComplete():void
			{
				preWords = getWords(spellCheckText);
				var words:Array = getWords(textArea.text);

				compareWordsAndChangeHTML(words, preWords);
			}

			private function compareWordsAndChangeHTML(words:Array, againstWords:Array):void
			{
				var len:int = words.length;

				for (var i:int=0; i < len; i++)
				{
					if (words[i] != againstWords[i])
						xmlExport = XML( xmlExport.toString().replace( againstWords[i], words[i]) );
				}
			}

			private function getWords(text:String):Array
			{
				var wordPattern:RegExp =/\b\w+\b/; // match next word...
				var inputValue:String = text;
				var offset:int, curPos:int;
				var words:Array = [];

				for ( ; ; )
				{
					var res:Array = inputValue.match( wordPattern ); // lookup word by word....
					if ( res == null ) break;

					words.push( res[0] );
					inputValue = inputValue.substr(inputValue.indexOf(res[0])+ res[0].length);
				}

				return words;
			}

		]]>
	</fx:Script>

	<s:Rect width="100%" height="100%">
		<s:stroke>
			<s:SolidColorStroke color="#000000" weight="1"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor color="#FFFFFF" />
		</s:fill>
	</s:Rect>

	<s:Button id="closeButton" x="320" y="10"
			  width="13" height="13"
			  buttonMode="true"/>

	<mx:TextArea id="textArea"
				 x="10"
				 y="16"
				 width="300"
				 height="173"
				 fontSize="16"
				 text="{spellCheckText}"
				 updateComplete="onUpdateComplete()"/>

	<s:Button id="completeCheckSpelling" x="10" y="205" label="Done"/>
</s:Group>