0

Flex 4 Rich Text Editor, now with Spell Check

I’ve updated the Flex 4 RTE with US English spellchecking using the very useful Squiggly from Adobe Labs. Basically, it works like your typical MS Word spellcheck. Red squiggly lines will appear if it thinks you’ve mistyped something and you can right click to bring up a context menu to see your options.

One interesting bug that I ran into and wrestled with for 1 hour was that if you use a Spark Panel as your container, it swallows up your context menu and just gives you the plain ole Flash context menu. After some googling, I found out that it was already logged in Squiggly’s JIRA. As luck would have it, a very kind member provided a workaround. Make sure that you have mouseEnabled=true in your opening Panel tag as well as the listed creationComplete event handler:

<s:Panel
	title="SimpleTextEditor"
	horizontalCenter="0" verticalCenter="0"
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx" height="300"
	mouseEnabled="true" creationComplete="creationCompleteHandler(event)"
	>

    protected function creationCompleteHandler(event:FlexEvent):void
    {
	    this.skin.mouseEnabled = true;
    }

Problem solved! As usual, you can play with it here and pull the repo from github.

2

Flex 4 Rich Text Editor via Text Layout Framework

Rolled my own RTE for Flex 4 recently due to the lackluster out-of-the-box RTE provided by Flex 4 using Adobe’s Text Layout Framework. It has all the standard stuff that you might expect from a typical RTE:

  • Font type selection
  • Font size selection
  • Multilanguage support
  • Justification
  • Font colours

which is already more than what Flex 4 gives us. I suppose one could use the RTE from Flex 3, but when you’re developing in Flex 4, it’s gonna be messy when you start to mix lots of Spark and Halo components together.

Besides, the main reason I had to roll my own RTE was because I wanted strikethrough, text search (incluging regex search) and undo functionality, which aren’t in Flex 3’s RTE anyway. The RTE can be found under the Projects menu header or one can jump directly to the example.

For those who are interested, feel free to clone the github repo and contribute.