Set Button State
This article explains the different states of the RadEditor buttons, how to set them through code and how to choose their images.
RadEditor toolbar buttons have four states:
- Enabled / Active ()
- Hovered / Highlighted ()
- Selected / Pressed ()
- Disabled / Inactive ()
You can control the appearance of the button in each state via CSS (see Examples 2-10 below). This is often needed for custom buttons.
You can also set a button's state via JavaScript (see Example 1). The Hovered state requires a user action and cannot be set through code.
To do this, use the setState
method the buttons expose. It takes a member of the Telerik.Web.UI.Editor.CommandStates
enum:
-
Telerik.Web.UI.Editor.CommandStates.Disabled
which is equivalent to-1
and results in a Disabled button -
Telerik.Web.UI.Editor.CommandStates.Off
which is equivalent to0
and results in a normal button state (Enabled) -
Telerik.Web.UI.Editor.CommandStates.On
which is equivalent to1
and results in a Selected state
Example 1 demonstrates how to implement a custom button that will be enabled when an image in the content area is selected and disabled in all other cases.
<script type="text/javascript">
function OnClientSelectionChange(editor, args) {
var selElem = editor.getSelection().getParentElement(); //return the currently selected object in the content area
var oTool = editor.getToolByName("Custom1"); //get a reference to the custom tool
if (selElem.tagName == "IMG") //if the selected element is of image type, make the tool's icon active
{
oTool.setState(0); //Enable Tool Icon
}
else {
oTool.setState(-1); //Disable Tool Icon
}
}
</script>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Custom1" />
</telerik:EditorToolGroup>
</Tools>
<Content>
<img src="https://docs.telerik.com/devtools/aspnet-ajax/images/introduction-Telerik_UI_for_aspnet-ajax_logo_documentation.png"></img>
</Content>
</telerik:RadEditor>
To put the custom button in pressed state use oTool.setState(1);
Set Icons for Toolbar Button States
To set an icon for different states of the custom button use CSS selectors for the corresponding render mode.
Classic RenderMode
/*Active state*/
.reToolbar.<skinName> .<commandName>
{
background-image: url(MyActiveStateImage.gif);
}
/*Hovered state*/
.reToolbar.<skinName> .<commandName>:hover
{
background-image: url(MyHoveredStateImage.gif);
}
/*Selected state*/
.reToolbar.<skinName> .reTool_selected .<commandName>
{
background-image: url(MySelectedStateImage.gif);
}
where skinName
corresponds to the Skin you are using and commandName
is the Name of the custom button you have.
/*Active state*/
.reToolbar.Default .Custom1
{
background-image: url('https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/buttons/images/active-state-icon.png');
}
/*Hovered state*/
.reToolbar.Default .Custom1:hover
{
background-image: url('https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/buttons/images/hovered-state-icon.png');
}
/*Selected state*/
.reToolbar.Default .reTool_selected .Custom1
{
background-image: url('https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/buttons/images/selected-state-icon.png');
}
You can set images in the RibbonBar ToolbarMode by:
setting the
ImageUrl
andImageUrlLarge
properties of the EditorTooldeclaring them in the toolsfile
These images do not have different states on their own, hover and active states are provided by the ribbon bar buttons that contain the images.
Lightweight RenderMode
/*Active state*/
.reToolBar.RadEditor_<skinName> .re<commandName>:before
{
content: "\e681";
}
/*Hovered state*/
.reToolBar.RadEditor_<skinName> .re<commandName>:hover:before
{
content: "\e64d";
}
/*Selected state*/
.reToolBar.RadEditor_<skinName> .re<commandName>.reToolSelected:before
{
content: "\e600";
}
/*Active state*/
.reToolBar.RadEditor_Default .reCustom1:before
{
content: "\e681";
}
/*Hovered state*/
.reToolBar.RadEditor_Default .reCustom1:hover:before
{
content: "\e64d";
}
/*Selected state*/
.reToolBar.RadEditor_Default .reCustom1.reToolSelected:before
{
content: "\e600";
}
You can also set the font-family and use your own font-icons.
/* The generic class name is re<toolName> */
a.reTool.reCustom2,
a.reTool.reCustom2:hover
{
background-image: url(images/myCustom2Icon.png);
background-repeat: no-repeat;
background-position: 2px 2px;
}
/* remove the built-in icon */
a.reTool.reCustom2:before
{
content: "";
}
Since the image has a static size, if the font-size of the editor is changed, it will not provide the elastic abilities of the font-icons and stretch as well. Thus, if you intend to change the font-size of the control, you need to take into account that when creating the image size and choosing its position.
/* generic rule */
.reRibbonTool .re<toolName>:before
{
content: "\e681";
}
/* example for tool with name "customTool" */
.reRibbonTool .recustomTool:before
{
content: "\e681";
}
/* generic rule */
/*remove the built-in font icon*/
.reRibbonTool .re<toolName>:before
{
content: "";
}
/*for any button type*/
.reRibbonTool .re<toolName>
{
background-image: url('images/button.png');
}
/* example for tool with name "customTool" */
/*remove the built-in font icon*/
.reRibbonTool .recustomTool:before
{
content: "";
}
/*for any button type*/
.reRibbonTool .recustomTool
{
background-image: url('images/small.png');
}
/*for a small button*/
.reRibbonTool.rrbSmallButton .recustomTool
{
background-image: url('images/small.png');
}
/*for a medium button*/
.reRibbonTool.rrbMediumButton .recustomTool
/*the size of the images is the same as in a small button*/
{
background-image: url('images/medium.png');
}
/*for a large button*/
.reRibbonTool.rrbLargeButton .recustomTool
{
background-image: url('images/large.png');
}
Hover and active states are provided by the ribbon bar button, not by the font icon itself.
Mobile RenderMode
/*Active state*/
.RadEditor_<skinName> .reToolList .reIcon<commandName>:before
{
content: "\e681";
}
/*Hovered state*/
.RadEditor_<skinName> .reToolList .reIcon<commandName>:hover:before
{
content: "\e64d";
}
/*Selected state*/
.RadEditor_<skinName> .reToolList .reButtonSelected .reIcon<commandName>:before
{
content: "\e600";
}
/*Active state*/
.RadEditor_Default .reToolList .reIconCustom1:before
{
content: "\e681";
}
/*Hovered state*/
.RadEditor_Default .reToolList .reIconCustom1:hover:before
{
content: "\e64d";
}
/*Selected state*/
.RadEditor_Default .reToolList .reButtonSelected .reIconCustom1:before
{
content: "\e600";
}
You can also set the font-family and use your own font-icons.