5 Replies Latest reply on Aug 10, 2010 12:48 PM by MrWalle

    RichTextEditor

    MrWalle

      I am trying to embed a font in RichTextEditor with the following code:

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

       

      <fx:Style>

       

      @font-face {

      src: url("../libs/Discognate.ttf") ;

      fontFamily: Disco;

      fontWeight: bold;

      embedAsCFF: true;

      }

       

      @font-face {

      src: url("../libs/DiscognateLight.ttf") ;

      fontFamily: Disco;

      fontWeight: normal;

      embedAsCFF: true;

      }

       

      </fx:Style>

       

      <fx:Script>

      <![CDATA[

      private function returnHandler():void {

       

      RTE.fontFamilyArray = ["Disco"];

      }

      ]]>

      </fx:Script>

       

      <mx:RichTextEditor id="RTE" title="Title" width="440" height="368" creationComplete="returnHandler();"/>

       

      </s:Application>

       

       

       

      App compiles and runs ok. I see the font name in the dropdown.

       

      Screen shot 2010-08-08 at 3.09.29 AM.png

       

       

      But the font is not being applied. What am I doing wrong?

      Any hep would be greatly appreciated. Thank you!

        • 1. Re: RichTextEditor
          Ansury Level 3

          You didn't apply the font to the component anywhere.

           

           

                    @namespace mx "library://ns.adobe.com/flex/mx";
                    @font-face {
                         src: url("../libs/Discognate.ttf") ;
                         fontFamily: Disco;
                         fontWeight: bold;
                         embedAsCFF: false;
                    }
                    
                    @font-face {
                         src: url("../libs/DiscognateLight.ttf") ;
                         fontFamily: Disco;
                         fontWeight: normal;
                         embedAsCFF: false;
                    }
                    
                    mx|RichTextEditor {
                         font-family: Disco;
                    }
          

           

           

          Also notice you need embedAsCFF: false; rather than true.

          • 2. Re: RichTextEditor
            Ansury Level 3

            Btw if you don't want to apply the font to all RichTextEditors (like I did above with the mx|etc), there's other ways to use css which you should research.

             

            Although this is kinda weird isn't it - I wonder if the select box still works when you do this?  I haven't used RTE, so this has me wondering if there's a different way it should be done.  I think what I may be doing above is basically overriding all font settings for the editor..

            • 3. Re: RichTextEditor
              MrWalle Level 1

              Thanks for the response. Sorry if I have not been clear but I am trying to embed a few fonts and only those embedded fonts should be selected in the select box. Hence the use of FontFamilyArray. In my original example I have only one font but I would like to embed a few.

               

              To your earlier comment that I have not applied the font to any component: I thought I did apply the font to the RichTextEditor with this statement:

               

              RTE.fontFamilyArray = ["Disco"];

               

              I have also tried with embedAsCFF: false; without any success.

               

              Any ideas? Thanks in advance.

              • 4. Re: RichTextEditor
                Ansury Level 3

                Yeah the select box doesn't work at all with the clip I posted (of course..).  I can't find anything in the docs suggesting that anything more than what you've already done is needed.

                 

                Afraid I've never tackled this problem (which is very disappointing to see in RTE to be honest) so any 'ideas' I come up with probably aren't going to be ideal.  If you're willing to sacrifice displaying multiple types of fonts in that same textbox, I suppose you could do something similar to what I have above and alter the font style for the component itself in response to combo box events.  You just wouldn't be able to have Arial + Times + Disco + etc in the same box, it'd all be the same font.

                 

                If you really need the functionality the best I think I can recommend is taking a look at the source code for RichTextEditor to see if you can determine how to do what you want.  Perhaps you could subclass it to override/alter what you need to change, or (ugh) copy it and make modifications which allow the fonts you want to be used.

                • 5. Re: RichTextEditor
                  MrWalle Level 1

                  I was able to get the fonts to apply if I assigned a default font to the rich text editor:

                   

                  <mx:RichTextEditor id="rte" title="AccuConnect Rich Text Editor" width="100%" height="75%" fontFamily="Verdana" />

                   

                  Thank y'all for your suggestions.

                   

                  The code above is embedding the fonts at compile time and loading them at runtime. Is there a way to embed the fonts at runtime? What I am trying to achieve is to load only certain fonts based on some application logic. I have read that we can load stylesheets at runtime. Can that be used in anyway to dynamically populate fonts?

                   

                  Any help would be greatly appreciated!

                   

                  Thank you!