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

【问题标题】：Addressing in CSS in Flex: Buttons in RichTextEditor only?Flex 中的 CSS 寻址：仅 RichTextEditor 中的按钮？
【发布时间】：2009-02-01 07:02:57
【问题描述】：

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

【问题讨论】：

标签： css apache-flex addressing

【解决方案1】：

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

<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+click快捷方式，在标签/类名上，跳转到关联的类定义文件，但你也可以直接在[installDir]/sdks/[version]打开源文件]/frameworks/src/mx/RichTextEditor.mxml 自己看看。

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

希望对你有帮助！

【讨论】：

太棒了...我实际上将组件添加到 RTE 并将按钮添加到工具栏。我只是不知道你可以给东西样式名......我会尝试它，但它是一个简洁的黑客。谢谢。
你明白了——让我知道它是怎么回事！干杯。
检查我对这个问题的回答（低于还是高于？）：工作就像一个魅力。

【解决方案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";
        }
    }
}

然后在我的 styleSheet 中，我有这个

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

太棒了。再次感谢！

【讨论】：