Populating the nested font family ComboBox control in a Flex RichTextEditor control

by Peter deHaan on November 23, 2007

The following example shows you how you can edit the font family combo box in the RichTextEditor control in Flex.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/23/populating-the-nested-font-family-combobox-control-in-a-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="fontFamilyArr">
        <mx:String>Arial</mx:String>
        <mx:String>Verdana</mx:String>
        <mx:String>Comic Sans MS</mx:String>
    </mx:Array>

    <mx:RichTextEditor id="richTextEditor"
            fontFamilyArray="{fontFamilyArr}" />

</mx:Application>

View source is enabled in the following example.

You can also set the fontFamilyArray property using ActionScript, as seen in the following snippet:

richTextEditor.fontFamilyArray = fontFamilyArr;

Or, you can set the data provider on the ComboBox control directly, as seen in the following snippet:

richTextEditor.fontFamilyCombo.dataProvider = fontFamilyArr;

Tagged as: fontFamilyArray, fontFamilyCombo

{ 6 comments… read them below or add one }

1 Christian May 28, 2008 at 11:26 am: Where is it grabbing the Comic Sans font from? The system? I’m trying to define a custom font for the RichTextEditor and have gotten it to display in the editor, but the bold and italics don’t react. Have been able to define a custom font?

Reply
2 a_[w] June 4, 2008 at 8:42 am: Hi! How i can add embedded font to RichTextEditor?
I’m trying this solution
.fontFamilyArray = ['Arial', 'Verdana', 'VerdanaEmbeded'];
and many others but they not works.

Reply
3 Chris October 22, 2008 at 7:47 am: This method seems to only work with system fonts. Does anyone know how to apply this method to external true type, or open type embedded fonts?

Reply
4 Chris October 23, 2008 at 11:24 am: I just figured this one out. Make sure that if you embed a font, that every font used by the movie is embedded. Because if flex tries to use a font that is not embedded, Flex will automatically switch to using system fonts. IT WILL IGNORE YOUR EMBEDDED FONTS.

In my project, I was embedding 2 non-system fonts. The Rich Text editor by default uses Verdana to display your text size, font, all the control components that belong to the Rich Text Editor… And since I didn’t embed Verdana, Flex ignored my embedded fonts, and forced the movie to use Verdana. After I embedded the system font (Verdana) everything worked as expected.

Reply
5 Joel Grøndrup November 18, 2008 at 6:31 am: @Chris

You’re a lifesaver – or at least timesaver. I would never have guessed you should embed Verdana before the other embedded fonts would work. This was really important to know. My RichTextEditor did exactly the same, so i embeded the verdana and the other fonts showed up correct.

Thanks!

Reply
6 Cindy December 3, 2009 at 8:32 am: hi!!! i try add more fonts in my richtexteditor component but don’t work .

the array font is this and the font i want to add is Anime Ace 2.0 BB.

_sans
_serif
_typewriter
Arial
Anime Ace 2.0 BB
Courier
Courier New
Geneva
Georgia
Helvetica
Times New Roman
Times
Verdana

in my css :
@font-face {
src: local(“Verdana”);
fontFamily: VerdanaEmbed;
}
@font-face {
src: local( “Verdana” );
fontWeight: bold;
fontFamily: VerdanaEmbed;
}

@font-face {
src: url(“../fonts/MyriadWebPro-Bold.ttf”) ;
fontFamily: Myriad;
fontWeight: bold;
unicodeRange:
U+0041-U+005A; /* Upper-Case [A..Z] */
}

@font-face {
src: url(“../fonts/animeace2_reg.ttf”) ;
fontFamily: Anime;
fontWeight: normal;

}

@font-face {
src: url(“../fonts/animeace2_bld.ttf”) ;
fontFamily: Anime;
fontWeight: bold;

}

i apreciate any help!

Reply