Flex Rich Text Editor - Limiting the number of characters

Question

Is there a way to restrict the number of characters in the Flex Rich Text Editor? I guess there should be, since it's possible in a textarea. So, if I could get hold of the textarea contained in the rich text editor, I would be able to do it

Answer 1

I think this would be fairly easy in actionscript, although I'm not exactly sure how one would do it in mxml. It appears that there are two children that are contained in the RichTextEditor, one of them being TextArea. According to the documentation (http://livedocs.adobe.com/flex/3/langref/mx/controls/RichTextEditor.html#propertySummary), you can access the subcontrols like so:

myRTE.toolBar2.setStyle("backgroundColor", 0xCC6633);

With myRTE being the instance of your text editor. So my guess would be something like this would work:

myRTE.textArea.maxChars = 125;

With 125 being the number a characters you would want restricted to.

Answer 2

i just ran into this.

setting your maxChars on the textArea will provide a limit to the text area, but that won't be representative of the number of characters the user can type.

as the user is typing, markup is added behind the scenes, and that greatly increases the char count.

for example, if i type the letter 'a' into a RichTextEditor, i get a char count of 142 and this htmlText:

<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#0B333C" LETTERSPACING="0" KERNING="0">a</FONT></P></TEXTFORMAT>

i could not see a straightforward way to get a proper maxChar to work out of the box, so i extended RichTextEditor and gave it a maxChar. if maxChar > 0, i added a listener to "change" and did something like this in the event handler:

    protected function handleTextChange(event:Event) : void
    {
        var htmlCount:int = htmlText.length;

        // if we're within limits, ensure we reset
        if (htmlCount < maxChars)
        {
            textArea.maxChars = 0;
            this.errorString = null;
        }
        // otherwise, produce an error string and set the component so the user
        // can't keep typing.
        else
        {
            var textCount:int = textArea.text.length;
            textArea.maxChars = textCount;

            var msg:String = "Maximum character count exceeded. " +
                "You are using " + htmlCount + " of " + maxChars + " characters.";

            this.errorString = msg;
        }
    }

the idea is to apply a maxChars to the text area only when in the error state, so the user cannot type anything additional and will be prompted to erase some chars. once we leave the error state, we need to set the textArea.maxChars to zero so they can continue.