Adding tab key function in rich text editor (Flex 3)

Question

I'm trying to add the tab key functionality in a rich text editor using the event keyDown. Just to be clear, on a tab key, I need the control to remain in the same text box with '\t' spaces ahead and not skip to the next object. The following code that I tried works perfectly with a textArea but not with RichTextEditor. Am I missing something?

<mx:RichTextEditor width="90%"
                   height="274"
                   id="richTextArea"
                   htmlText="{chapterContent}" keyDown="onTabPress(event);"/>

The keyboard tab key is then handled at the script level as shown.

private function onTabPress(eventkey:KeyboardEvent):void 
{   
    switch(eventkey.keyCode)
    {
        case Keyboard.TAB:
            var indexBegin:int = eventkey.currentTarget.selectionBeginIndex;
            var range:TextRange = new TextRange(eventkey.currentTarget as UIComponent,false,indexBegin,indexBegin);
            range.text = "\t";
            var indexNext:int = eventkey.currentTarget.selectionBeginIndex+range.text.length;
            eventkey.currentTarget.setSelection(indexNext, indexNext);
            focusManager.moveFocus(FocusRequestDirection.BACKWARD);
            break;
    }
}

Thanks for all the help.

I know that the rte consists of a control and text area. How can I make sure that the keyDown listener attaches to just the textArea. Apologies if I sound amateurish. — shark1608, May 20 '13 at 21:01

score 0 · Answer 1 · answered Jun 12 '14 at 16:50

Had the same Issue. It worked for me, as is used the KEY_UP Event instead of the KEY_DOWN Event.

Instead of moving Focus back, I set the Focus directly to the textArea of the RichTextEditor:

<mx:RichTextEditor id="rte_txt" />
rte_txt.textArea.setFocus();

But using Focus Manager should work also.

score 0 · Answer 2 · answered Feb 02 '17 at 15:28

There seems to be some issue with trying to insert '\t' characters into a RichTextEditor... However, the RichTextEditor the event targets has an exposed textArea component. Your code works great in a textArea, so you could change the target slightly.

It's a slight edit, but the following code works for me:

    private function onTabPressed(event:KeyboardEvent):void {
        switch(event.keyCode) {
            case Keyboard.TAB :
                var indexBegin:int = event.currentTarget.textArea.selectionBeginIndex;

                var range:TextRange = new TextRange(event.currentTarget.textArea as UIComponent, false, indexBegin, indexBegin);
                range.text = "\t";

                var indexNext:int = event.currentTarget.textArea.selectionBeginIndex + range.text.length;
                event.currentTarget.textArea.setSelection(indexNext, indexNext);
                focusManager.moveFocus(FocusRequestDirection.BACKWARD);
                break;
        }
    }

With :

<mx:RichTextEditor width="90%"
                   height="274"
                   id="richTextArea"
                   htmlText="{chapterContent}" 
                   keyDown="onTabPress(event);"/>

Adding tab key function in rich text editor (Flex 3)

2 Answers2