Usable properties of RichTextEditor Control in flex.

RichTextEditor Control has many properties as it has many editable options init.

If u wanted to hide the different buttons at the controlbar use the property showControlBar and set it as false.It will hide the controlbar which will also hide the buttons on it.

And what if i want to hide a particular button or control in RTE.Then there are many properties for that for each one.

linkTextInput -> for link bar on control bar.

alignButtons ->for alignment buttons.

boldButton ->for bold button

colorPicker ->for color picker

italicButton ->for italic button

underlineButton ->for underline button

fontFamilyCombo ->for font family box.

fontSizeCombo ->for font size box.
bulletButton ->for bullet button.

_VRule1 ->for v rule 1 button.

_VRule2 ->for v rule 2 button.

Code Example:

private function init():void
{
rte.linkTextInput.visible=false;
rte.alignButtons.visible=false;
rte.boldButton.visible=false;
rte.colorPicker.visible=false;
rte.italicButton.visible=false;
rte.underlineButton.visible=false;
rte.fontFamilyCombo.visible=false;
rte.fontSizeCombo.visible=false;
rte.bulletButton.visible=false;
rte._VRule1.visible=false;
rte._VRule2.visible=false;
rte.showControlBar=false;
}

<mx:RichTextEditor x=”315.5″ y=”40″ id=”rte”> </mx:RichTextEditor>

This shows the difference .. !

RichTextEditor with editable controls hidden..

leave any comment for queries..

Advertisements

14 Responses to Usable properties of RichTextEditor Control in flex.

  1. Dibya Ranjan Patnaik says:

    Dear Kumar,

    Really it came to usefull for me. Thanx

    Regards
    Dibya Rajan Patnaik

  2. kumargandhi says:

    MENTION NOT!
    actually i love to share my knowledge.

    regards
    kumar gandhi

  3. SGia says:

    Thanks for this, quick question –
    How do I set the initial font size when I load the richEdit box ?

    I can set the selectedIndex value for the fontSizeCombo (i.e. so it displays 14 when loaded) , however text then entered is still the default size of 8.

    any ideas? It seems the change event of the fontSizeCombo is what causes the change, not just setting the value.

    • Hi there,

      This worked for me, although it is a dirty hack. I’m still looking for the proper solution:

      private function onCreationComplete (
      event : FlexEvent) : void {

      // Customize editor:
      rtEditor.fontFamilyCombo.selectedIndex = 7;
      rtEditor.fontFamilyCombo.open ();
      rtEditor.fontFamilyCombo.close ();
      rtEditor.fontSizeCombo.selectedIndex = 4;
      rtEditor.fontSizeCombo.open ();
      rtEditor.fontSizeCombo.close();
      }

      Of course, I’m setting this function as the “complete” handler of the component that includes my RichTextEditor, and “rtEditor” is the id of my RichTextEditor.

      Regards,
      C

      • kumargandhi says:

        Hi Claudius,

        i am glad you found a way out., and i had a look at your website, its good.

        regards,
        kumar.

      • Luis Moreno says:

        Hi

        This works for me. Setting the default value of the fontSize.

        in creationComplete set this:

        this.textArea.setStyle(”fontSize”, 12);

        Regards,
        Luis Moreno

  4. kumargandhi says:

    Hi,
    See the code for RichTextEditor there may be some properties for that ,as of now i didn’t come accross that and i will find out soon and comment here.

    regards,
    kumar.

  5. Omal Raj says:

    Hi there,

    You can set default values with the help of CSS

    RichTextEditor
    {
    textAreaStyleName: ‘rteStyle’;
    }

    .rteStyle
    {
    font-size:12;
    font-family:Arial;
    color:#000000;
    }

    Cheers
    Omal Raj

  6. santhosh says:

    Hi,

    I can take different fonts in a array and i can assign it to rich text editor but my problem is i have more than 150 fonts. Taking it in an array is not an good idea and it will very lengthy.
    Better idea to generate list dynamically from the web if any one know how it can be done please do reply.

  7. Dan says:

    Thanks for the info!
    Is there any way to remove the Panel from the RTE?
    It really gets in the way and looks horrible.

    Thanks,
    Dan

    • kumargandhi says:

      Hi,

      RTE is a MXML component made with collection of different components like TextArea,Buttons,Combobox,HBox…. inside a Panel Component , so if you don’t want the Panel there you can make one custom Component with your own layout component like a canvas and write your code for other stuff., just look in to the code [RichTextEditor.mxml] you will have an idea.

      regards,
      kumar.

  8. FlexNovice says:

    Is there a way to hide the title bar on the rich text editor? I’m new to flex and trying to learn.

    Thanks in adv for the help.

    Shravan

  9. Rob R says:

    Yes Shravan. I was looking for how to do this also. Since the RTE is within a panel, you can use the superclass properties of the panel, namely you can set the headerHeight to 0 and that will effectively hide the title bar from the RTE.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: