This is a migrated thread and some comments may be shown as answers.

Custom toolbar button ImageUrl is missing in editor display

4 Answers 147 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 02 Nov 2011, 09:25 PM
I've added two custom buttons to the toolbar on the rad editor to save files.  I've created icons for these buttons which I've placed into a folder called "images", relative to the webpage the editor is on.  When I run the page, all the out-of-the-box buttons in the editor's toolbar are displayed.  But, the two custom buttons I've added are using a telerik default floppy disk icon for the "Save" function, and a callout bubble containing an "i" icon for the "SaveAs" function instead of the images I've specified.

View source on the browser shows the codebehind did not insert the paths to the images specified by the ImageUrl attributes.  I've looked around the telerik forum and found some posts saying stylesheet classes are required, however, adding them hasn't helped.  The css classes only affect clientside script, and the omission of the images seems to be happening serverside.

What am I doing wrong?

I'm using Telerik RAD controls 2011.2.915.35 on windows 7 SP1 and am launching the page from inside of visual studio on the personal web browser.

directory structure:
[AllLanguagesSolution]
   [Images]
*      radeditorSave.jpg
*      radeditorSaveAs.jpg
   [Images] END
*   HTMLeditor.aspx
[AllLanguagesSolution] END

<head runat="server">
<title>HTML Editor Dialog</title>
<link href="styles/Main.css" rel="stylesheet" type="text/css" />
<link href="styles/authorit.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css">
        .reTool .Save
        {
            background-image: url(Images/radeditorSave.jpg);
        }
        .reTool .SaveAs
        {
            background-image: url(Images/radeditorSaveAs.jpg);
        }
    </style> 
</head>

<form id="frmHTMLeditor" runat="server">
<table>
<tr><td>
<telerik:RadScriptManager ID="mgrScriptHTMLeditor" Runat="server"></telerik:RadScriptManager>
</td></tr>
<tr><td>
<telerik:RadEditor ID="telerikeditor" Runat="server"
                   OnClientLoad="onClientLoad"
                   OnClientCommandExecuting="OnClientCommandExecuting">
    <Tools>
        <telerik:EditorToolGroup Tag="grpInputOutput">
            <telerik:EditorTool ImageUrl="./Images/radeditorSave.jpg"
                ImageUrlLarge="~/Images/radeditorSave.jpg" Name="Save" ShowText="True"
                Text="Save" />
            <telerik:EditorTool ImageUrl="./Images/radeditorSaveAs.jpg"
                ImageUrlLarge="~/Images/radeditorSaveAs.jpg" Name="SaveAs" ShowText="True"
                Text="Save As" />
        </telerik:EditorToolGroup>       
   </Tools>      
   <Content></Content>             
</telerik:RadEditor>

4 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 03 Nov 2011, 11:33 AM
Hello Andy ,

The ImageUrl and the ImageUrlLarge attributes currently work only when the ToolbarMode is set to "RibbonBar". When the standard toolbar is used you can set icons for the custom tools only through CSS.

Here is a solution for your scenario when the ShowText attribute is set to true, e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .reTool_text .Save
        {
            background-image: url(https://www.ovh.com/managerv3/images/managerv4/save.jpg) !important;
            background-position: 0px !important;
        }
        .reTool_text .SaveAs
        {
            background-image: url(http://www.sturmzeit.net/sections/pics/saveas.jpg)!important;
        }
    </style
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
 <telerik:RadEditor ID="telerikeditor" Runat="server">
    <Tools>
        <telerik:EditorToolGroup Tag="grpInputOutput">
            <telerik:EditorTool ImageUrl="./Images/radeditorSave.jpg"
                 Name="Save" ShowText="true"
                Text="Save" />
            <telerik:EditorTool ImageUrl="./Images/radeditorSaveAs.jpg"
                Name="SaveAs" ShowText="true"
                Text="Save As" />
        </telerik:EditorToolGroup>      
   </Tools>     
   <Content></Content>            
</telerik:RadEditor>
    </form>
</body>
</html>

When the ShowText is set to false, you can use:

<style type="text/css">
    .reTool .Save
    {
        background-image: url(https://www.ovh.com/managerv3/images/managerv4/save.jpg);
        background-position: 0 !important;
    }
    .reTool .SaveAs
    {
        background-image: url(http://www.sturmzeit.net/sections/pics/saveas.jpg);
    }
</style>


Best wishes,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Andy
Top achievements
Rank 1
answered on 03 Nov 2011, 04:25 PM
Thanks for the tips Rumen,

I ended up going with the following code (the icons for the buttons are 18x18 pixels in size)

<title>HTML Editor Dialog</title>
<link href="styles/Main.css" rel="stylesheet" type="text/css" />
<link href="styles/authorit.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css">
        .reTool_text .Save
        {
            background-image: url(Images/radeditorSave.gif) !important;
            background-position: 0px !important;
        }
        .reTool_text .SaveAs
        {
            background-image: url(Images/radeditorSaveAs.gif) !important;
            background-position: 0px !important;
        }
        .reTool .Save
        {
            background-image: url(Images/radeditorSave.gif) !important;
            background-position: 0px !important;
        }
        .reTool .SaveAs
        {
            background-image: url(Images/radeditorSaveAs.gif) !important;
            background-position: 0px !important;
        }
    </style> 
</head>

 

<telerik:RadEditor ID="telerikeditor" Runat="server"
                   OnClientLoad="onClientLoad"
                   OnClientCommandExecuting="OnClientCommandExecuting">
    <Tools>
        <telerik:EditorToolGroup Tag="grpInputOutput">
            <telerik:EditorTool ImageUrl="Images/radeditorSave.gif"
                Name="Save" ShowText="False"
                Text="Save" />
            <telerik:EditorTool ImageUrl="Images/radeditorSaveAs.gif"
                Name="SaveAs" ShowText="False"
                Text="Save As" />
            <telerik:EditorSeparator />

0
Waseem
Top achievements
Rank 1
answered on 05 Sep 2014, 04:51 PM
 Radeditor icons are missing in Internet explorer. But when i show full RadEditor. it is showing correctly.

<telerik:RadEditor ID="txtEditor1" runat="server"                                              
                                                    ToolbarMode="Default" BorderStyle="None" EditModes="Design" BorderWidth="0" BorderColor="Transparent"
                                                     Height="190" Width="575">
                                                      <Tools>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="Bold" />
                                                            <telerik:EditorTool Name="Italic" />
                                                            <telerik:EditorTool Name="Underline" />
                                                            <telerik:EditorTool Name="ForeColor" />
                                                            <telerik:EditorTool Name="InsertSymbol" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="InsertUnorderedList" />
                                                            <telerik:EditorTool Name="InsertOrderedList" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="Outdent" />
                                                            <telerik:EditorTool Name="Indent" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="JustifyLeft" />
                                                            <telerik:EditorTool Name="JustifyCenter" />
                                                            <telerik:EditorTool Name="JustifyRight" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="LinkManager" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorToolStrip Name="InsertTable" />
                                                        </telerik:EditorToolGroup>
                                                    </Tools>
                                                    <Content>
                                                    </Content>
                                                                                                
                                                </telerik:RadEditor>


Thanks,
Muhammad Waseem
The Telerik Team
0
Waseem
Top achievements
Rank 1
answered on 05 Sep 2014, 10:30 PM
For custom tools, use this css for missing icons.

.reToolbar span
{
    position: absolute !important;
    padding: 0px !important;
}

.reWrapper_corner, .reWrapper_center, .reLeftVerticalSide, .reRightVerticalSide
{
    line-height: 0px !important;
    font-size: 0px !important;
}

.reToolCell
{
    background-color:White !important;
    border: none !important;
}

.reTlbVertical
{
    background-color: White !important;
    border: none !important;
}

.reToolbar li
{
    background-image: none !important;
}

.Default .reTool .split_arrow
{
    margin: 0px 0px 0px 23px !important;
}

Thanks,
Muhammad Waseem
The Telerik Team
Tags
Editor
Asked by
Andy
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Andy
Top achievements
Rank 1
Waseem
Top achievements
Rank 1
Share this question
or