Flex Examples
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;
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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?
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.
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?
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.
@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!
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!
If say your font family name is
fontFamily: Anime;
Why not try putting ‘Anime’ in your array?
…
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
@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
Peter, thank you for the quick reply!
Indeed I was using 3.5… switching to 3.6 everything seems ok!
– fabiolune