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

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

<?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;

10 thoughts on “Populating the nested font family ComboBox control in a Flex RichTextEditor control

  1. 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?

  2. 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.

  3. 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?

  4. 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.

  5. @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!

  6. 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!

  7. This definitely works. It also works with embedded fonts if the main Application only contains embedded fonts.
    Anyway the situation seems to be a bit different when trying to dynamically modify the fontFamilyArray: I’m working on a Flex based CMS with only runtime embedded fonts and I need to say, when editing textboxes, something like:
    myRTE. fontFamilyArray = myEmbeddedFontsArray;

    Anyway, if load (and register) a new font, modify myEmbeddedFontsArray and then re-execute the same instruction, the fontFamilyCombo seems to feel the change in its dataProvider (it resizes), but does not show the desired list of fonts unless I select, from the drop down list, a new font.
    This may result frustrating because sometimes in the first assignement the fontFamilyArray only contains a single font hence no new selection is possible!

    I tried to replace the above code with:
    myRTE.fontFamilyCombo.dataProvider = myEmbeddedFontsArray;
    but nothing changes.

    Any help or idea?
    Thx!

    — fabiolune

    1. @fabiolune,

      Which version/build of Flex are you using? Sounds like a known mx:ComboBox issue injected in 3.4 or 3.5 and should be fixed in the Flex 3.6 nightly builds.

      Peter

      1. Peter, thank you for the quick reply!
        Indeed I was using 3.5… switching to 3.6 everything seems ok!

        — fabiolune

Comments are closed.