Question

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

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

我确信还有其他方法（setStyle是一个，虽然出于性能原因通常不鼓励明确使用它），但这应该适合你。但有一点需要注意的是，正如您在挖掘组件的源代码时所看到的那样，默认按钮组中的许多按钮实际上使用的是PNG（例如icon_style_bold.png），而不是文本，这就是为什么我的示例包含对ComboBox的引用，因此您可以看到颜色更改的应用方式;如果你想改变按钮的外观，请注意它们的外观和风格是使用可定制的icon属性，而不是字体样式设置。

希望它有所帮助！

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";
        }
    }
}

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

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

真棒。再次感谢！

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

2 个答案: