Friday, April 30, 2010

Flex 3: RTE Bullet and Align button issue

While working with Rich Text Editor component of Flex 3, I cam across with strange issue.

Try out following flow. On fresh launch change Font / Font Size / Font Color / Bold / Italic / Underline and then if you click on either alignment buttons or Bullet button. Ideally all formatting setting should retain and whatever you type should have these formatting. But it is failing. The formatting will revert back to the default values.

I tried to find out the actual issue, In the RichTextEditor.mxml, within the setTextStyles function. New text format instance is been created in Bullet and align button click condition. This new TextFormat object overwrites the previously set formatting.

else if (type == "align" || type == "bullet")
if (beginIndex == endIndex)
tf = new TextFormat();

To overcome this issue I have written a fix in the mxml where RTE instance is been created. To fix this issue, I just had assigned the formatted values to the newly created TextFormat object, Doing this will retain the previously set formatting.
Following is the code snippet for the fix.

public function checkForFormating():void
var textField:IUITextField = textArea.getTextField();
var beginIndex:int = textField.selectionBeginIndex;
var endIndex:int = textField.selectionEndIndex;
if (beginIndex == endIndex)
var tf:TextFormat;
tf = textField.defaultTextFormat;

tf['font'] = fontFamilyCombo.text;

var fontSize:uint = uint(fontSizeCombo.text);
if (fontSize > 0)
tf['size'] = fontSize;

tf['color'] = uint(colorPicker.selectedColor);

tf['bold'] = boldButton.selected;
tf['italic'] = italicButton.selected;
tf['underline'] = undoButton.selected;

if (alignButtons.selectedIndex == 0)
tf.align = "left"
else if (alignButtons.selectedIndex == 1)
tf.align = "center"
else if (alignButtons.selectedIndex == 2)
tf.align = "right"
else if (alignButtons.selectedIndex == 3)
tf.align = "justify"

tf['bullet'] = bulletButton.selected;

if (lineSpaceButton.selectedIndex == 0)
tf.leading = "2"
else if (lineSpaceButton.selectedIndex == 1)
tf.leading = "4"
else if (lineSpaceButton.selectedIndex == 2)
tf.leading = "8"

textField.defaultTextFormat = tf;
In this function, basically i have reassign all the formatting based on the default formatting property. All you have to do is call this function on bullet / align button click. Add a Mouse Click listener and call this function on handler.

This will resolve the issue. I have tested this and it works fine, Let me know if you find any issue in this.


Post a Comment