Setting a status message in a Flex RichTextEditor control

The following example shows how you can set a status message in a RichTextEditor control’s title bar in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/21/setting-a-status-message-in-a-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.TextArea;
            import mx.controls.RichTextEditor;

            private const MAX_CHARS:uint = 100;

            private function richTextEditor_creationComplete(evt:FlexEvent):void {
                RichTextEditor(evt.currentTarget).textArea.maxChars = MAX_CHARS;
            }

            private function richTextEditor_change(evt:Event):void {
                var rte:RichTextEditor = evt.currentTarget as RichTextEditor;
                var rteTA:TextArea = rte.textArea as TextArea;
                rte.status = rteTA.length + "/" + rteTA.maxChars;
            }
        ]]>
    </mx:Script>

    <mx:RichTextEditor id="richTextEditor"
            title="Rich Text Editor"
            height="200"
            change="richTextEditor_change(event);"
            creationComplete="richTextEditor_creationComplete(event);" />

</mx:Application>

View source is enabled in the following example.

If you want to set a style on the RichTextEditor control’s status message, add the following snippet to the previous example:

<mx:Style>
    RichTextEditor {
        statusStyleName: richTextEditorStatus;
    }

    .richTextEditorStatus {
        color: red;
        fontWeight: bold;
    }
</mx:Style>

Tagged as: maxChars