Flex: Modifying Text Area

Question

I'm making a text editor using Text Area. Which user can change font size, family and etc.
This is my code on as:

    private function ChangeFont(event: Event):void
       {
        var mySelectedTextRange:TextRange = new TextRange(thistxtarea,true,
                                                thistxtarea.selectionBeginIndex,
                                                thistxtarea.selectionEndIndex);
        mySelectedTextRange.fontSize = int(cmbbxFntSze.text);
        thistxtarea.setFocus();
       }

i have this combo box to enter desired font size:

<mx:ComboBox x="78" y="8" width="114" id="cmbbxFntFam"  close="ChangeFont(event)"></mx:ComboBox>

How do I change font properties if the text inside is not highlight? For example I position the mouse pointer on last index of text inside my Text Area and I select on my combo box the desired font size. The following font size of letter that inputed in Text Area should be the selected font size on combo box. The code that I post works only if I highlight the desired text.

Answer 1

Have you perhaps taken a look at how mx.controls.RichTextEditor does this? You can find it in ...\frameworks\projects\framework\src\mx\controls

If you scan that code you will see that the RichTextEditor retains the current text style settings in TextFormat variable it maintains, and then applies that style to newly entered text. That variable is updated when the user changes fonts/sizes or when the selection changes to grab the neighboring style. There is special consideration for the case of selectionBeginIndex == selectionEndIndex as well.

Answer 2

This is to set the style

private function setTextStyles(type:String, value:Object = null):void
        {
            if(thisindex != -1)
            {
                var tf:TextFormat;

                var beginIndex:int = textArea.getTextField().selectionBeginIndex;
                var endIndex:int = textArea.getTextField().selectionEndIndex;

                textArea.getTextField().alwaysShowSelection = true;

                if (beginIndex == endIndex)
                {
                    tf = previousTextFormat;
                }
                else    
                    tf = new TextFormat();


                if (type == "bold" || type == "italic" || type == "underline")
                {
                    tf[type] = value;
                }
                else if (type == "align")
                {
                    if (beginIndex == endIndex)
                    {
                        tf = new TextFormat();
                    }

                    // Apply the paragraph styles to the whole paragraph instead of just 
                    // the selected text
                    beginIndex = textArea.getTextField().getFirstCharInParagraph(beginIndex) - 1;
                    beginIndex = Math.max(0, beginIndex);
                    endIndex = textArea.getTextField().getFirstCharInParagraph(endIndex) +
                        textArea.getTextField().getParagraphLength(endIndex) - 1;
                    tf[type] = value;
                    previousTextFormat[type] = value;
                    if (!endIndex)
                        textArea.getTextField().defaultTextFormat = tf;
                }
                else if (type == "font")
                {
                    tf[type] = cmbbxFntFam.text;
                }
                else if (type == "size")
                {
                    var fontSize:uint = uint(cmbbxFntSze.text);
                    if (fontSize > 0)
                        tf[type] = fontSize;
                }
                else if (type == "color")
                {
                    tf[type] = uint(clrpckerFontColor.selectedColor);
                }


                textFormatChanged = true;

                if (beginIndex == endIndex)
                {                       
                    previousTextFormat = tf;
                }
                else
                {
                    textArea.getTextField().setTextFormat(tf,beginIndex,endIndex);//textArea.setTextFormat(tf,beginIndex,endIndex);
                }

                dispatchEvent(new Event("change"));

                var caretIndex:int = textArea.getTextField().caretIndex;
                var lineIndex:int = textArea.getTextField().getLineIndexOfChar(caretIndex);

                textArea.invalidateDisplayList();
                textArea.validateDisplayList();
                textArea.validateNow();

                // Scroll to make the line containing the caret under viewable area
                while (lineIndex >= textArea.getTextField().bottomScrollV)
                {
                    textArea.verticalScrollPosition++;
                }

                callLater(textArea.setFocus);

            }
        }

This code is use for getting the style from the textArea

 private function getTextStyles():void
        {               

            if (!textArea)
                return;

            var tf:TextFormat;

            var beginIndex:int = textArea.getTextField().selectionBeginIndex;
            var endIndex:int = textArea.getTextField().selectionEndIndex;

            if (textFormatChanged)
                previousTextFormat = null;

            if (beginIndex == endIndex)
            {
                tf = textArea.getTextField().defaultTextFormat;
                if (tf.url != "")
                {
                    var carIndex:int = textArea.getTextField().caretIndex;
                    if (carIndex < textArea.getTextField().length)
                    {
                        var tfNext:TextFormat=textArea.getTextField().getTextFormat(carIndex, carIndex + 1);

                        if (!tfNext.url || tfNext.url == "")
                            tf.url = tf.target = "";
                    }
                    else
                        tf.url = tf.target = ""; 
                }
            }
            else
                tf = textArea.getTextField().getTextFormat(beginIndex,endIndex);                


            if (cmbbxFntSze.text != tf.font)
                setComboSelection(cmbbxFntFam, tf.font);
            if (int(cmbbxFntSze.text) != tf.size)
                setComboSelection(cmbbxFntSze,String(tf.size));
            if (clrpckerFontColor.selectedColor != tf.color)
                clrpckerFontColor.selectedColor = Number(tf.color);

            if (btnBold.selected != tf.bold)
                btnBold.selected = tf.bold;//Alert.show("bold");
            if (btnItalic.selected != tf.italic)
                btnItalic.selected = tf.italic;
            if (btnUnderline.selected != tf.underline)
                btnUnderline.selected = tf.underline;


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



            if (textArea.getTextField().defaultTextFormat != tf)
                textArea.getTextField().defaultTextFormat = tf;
            previousTextFormat = tf;
            textFormatChanged = false;

            lastCaretIndex = textArea.getTextField().caretIndex;                
            thishtmltxt = textArea.htmlText;
            textArea.validateNow();
        }

Please check for minor errors, coz when i code this i have some commented traces