Creating simple WYSIWYG editor with AS3 (Flex)

There are dozen of JavaScript WYSIWYG editors available, but most of them are too complicated and a little bit buggy. From time to time I'm using my own tool to provide such kind of functionality. It accepts and exports valid html. I decided to share it with you and explain how I built it.

The result of this tutorial is available here. Download the source code from here.

Most of this types of editors are used in content management systems, so they should support importing and exporting html. That's why I'll split the tutorial in two parts.

1. The JavaScript part

Basically the idea is to pass a name of javascript function to the .swf file. This function will be called every time when the user changes something in the editor. In the code above this is onTextChange. The function accepts only one parameter which is actually the HTML string. You can do whatever you want in this function. For example you can change the value of a textarea or hidden input field which is part of a form for submitting. In this example I just displayed the html code below the flash.
The editor has also a method for changing the text from javascript. It's called setText. Have in mind that it is available only when the flash is fully loaded and displayed. That's why I used setTimeout to send the default text.

2. The ActionScript part

The starting point of our editor is the following .mxml file.
Actually the logic of the editor is in lib.document.App. I always prefer to work with purely AS code instead of mxml. Please note that I passed the loaderInfo of the very root component. I needed it to get the callback method which has to be fired when the user changes the content.

The first thing that we should do is to add the RichTextEditor component on the stage. It's available in mx.controls package so don't forget to add import mx.controls.RichTextEditor; on top of your class. Here is the constructor of App class.
I created an instance of RichTextEditor and added it to the stage. I also manually removed some of the controls that are available by default. I disabled the choose of font type and size, the making of bullets and the aligning. I did it because these features add more html tags or attributes which I have to handle with and basically I don't want to give such power to the user, because changing the align of the text or the size of the font can break the page's design and make things look really bad.
There is also a listener registered for Event.CHANGE event. This event will be dispatched every time when the user makes some change on the text. Here is the code of the onTextChange method:
When the text (_editor.htmlText) comes to this function it looks like that:
This code doesn't look good, because it contains some invalid attributes and all the tags are in uppercase style. That's why I wrote several functions that transformed this string to a valid html.

Removing the invalid tags:


Remove the unnecessary tags' attributes:


And at the end lowercase all the tags:


The result is:


The valid code is sent to the javascript method:


Have in mind that if you want to import html in this editor the code should be similar to the one that you are exporting. I.e. you can't pass divs and complicated layouts, because the flash player can't render them properly.

The result and the source code.