Flex 中的 CSS 寻址：仅 RichTextEditor 中的按钮？

Question

我想要更改 RichTextEditor 工具栏中按钮的字体特征，但我希望它们与应用程序中的其他按钮不同。 有什么方法可以只用CSS来做到这一点吗？我知道如果有必要我可以用setStyle来做到这一点......

Answer 1

由于 RichTextEditor 的子组件是在 MXML 中声明的，因此可以公开访问，因此一种方法是在运行时（在容器的 creationComplete 之后）单独分配它们的 styleName 属性。事件触发，以确保编辑器及其所有子组件都已创建），如下所示：

<mx:Style>

    .myRTECombo
    {
        color: #FF0000;
    }

</mx:Style>

<mx:Script>
    <![CDATA[

        private function creationCompleteHandler(event:Event):void
        {
            rte.fontFamilyCombo.styleName = "myRTECombo";
            rte.fontSizeCombo.styleName = "myRTECombo";
        }

    ]]>
</mx:Script>

<mx:RichTextEditor id="rte" />

Flex 文档不会通过 ID 调用子组件（“boldButton”、“fontSizeCombo”等），但组件的源是可供查看，因此您应该能够从源代码本身获取所需的所有信息。 由于我使用 FlexBuilder，我通常使用 Eclipse Ctrl+单击快捷方式，在标签/类名称上，跳转到关联的类定义文件，但您也可以直接在 [installDir]/sdks/[version ]/frameworks/src/mx/RichTextEditor.mxml 自己看看。

我确信还有其他方法（setStyle 是其中一种，尽管出于性能原因通常不鼓励显式使用它），但这应该适合您。 不过，需要注意的一件事是，当您深入研究组件的源代码时，您会看到，默认按钮集中的许多按钮实际上使用 PNG（例如，icon_style_bold.png），而不是文本，这就是为什么我的示例包含对 ComboBox 的引用，这样您就可以看到颜色更改是如何应用的； 如果您想更改按钮的外观，请注意它们使用的是可样式化的图标属性，而不是字体样式设置来实现其外观和感觉。

希望能帮助到你！

Answer 2

谢谢@Christian Nunciato！ 这是我的最终代码，在我的组件中，它是一个 RichTextEditor （扩展它）。 在creationComplete中，我称之为这个

private function setUpStyleNames():void {
    setUpStyleNamesInner(toolbar.getChildren());
    setUpStyleNamesInner(toolBar2.getChildren());
}

private function setUpStyleNamesInner(children:Array):void {
    for each (var child:DisplayObject in children) {
        if (child is UIComponent) {
            UIComponent(child).styleName = "rteInnards";
        }
    }
}

，然后在我的样式表中，我有这个

.rteInnards {
    color: #FF0000;
    fontSize: 25px;
}

Awesome。 再次感谢！