2 Replies Latest reply on Mar 19, 2008 7:06 AM by flashharry!

    Override Button Style for Rich text Editor

    flashharry! Level 1
      I have a component that is loaded in the main app. This component contains a Rich Text editor. I have set a button style in the main app,
      Button {
      removed styles for space.
      I like the look of the buttons I have set, But I don't like them in the footer of the rich text editor in my component.
      How can I override that in the component. I have tried button-style-name: "myButton"; in the rich text box style but that has no effect. Flex 2.01


        • 1. Re: Override Button Style for Rich text Editor
          Gregory Lafrance Level 6
          See this FB 2.0.1 help topic:
          Programming RichTextEditor subcontrols

          <?xml version="1.0"?>
          <!-- textcontrols/RTESubcontrol.mxml -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
          <!-- The RichTextEditor control. To set the a subcontrol's style or property, fully qualify the control ID. The footerColors style sets the ControlBar colors. -->
          <mx:RichTextEditor id="rte1"
          headerColors="[#88bb88, #bbeebb]"
          footerColors="[#bbeebb, #88bb88]"
          title="Rich Text Editor"
          text="Simple sample text"

          <!-- Button to set a white TextArea background. -->
          label="Change appearance"
          click="rte1.textArea.setStyle('backgroundColor', '0xffffff');rte1.colorPicker.selectedIndex=27;"

          <!-- Button to reset the display to its original appearance. -->
          label="Reset Appearance"
          click="rte1.textArea.setStyle('backgroundColor', '0xeeffee');rte1.colorPicker.selectedIndex=0;"

          • 2. Re: Override Button Style for Rich text Editor
            flashharry! Level 1
            Thanks that pointed me in the right direction.

            I added a creation complete function to the RTE & set the styles from there.


            private function setRteStyle():void {
            rte.alignButtons.styleName= 'MyToggleButtonBar';
            rte.bulletButton.styleName = 'myButton';
            rte.boldButton.styleName = 'myButton';
            rte.italicButton.styleName = 'myButton';
            rte.underlineButton.styleName = 'myButton';
            .myButton {
            highlightAlphas: 0.5, 0.14;
            fillAlphas: 1, 1, 0.75, 0.65;
            fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
            borderColor: #7e82ac;
            color: #92DE78;
            .MyToggleButtonBar {
            buttonStyleName: "mytoggleButtonBarButtonStyle";
            .mytoggleButtonBarButtonStyle {
            fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;