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

Custom toolbar button ImageUrl is missing in editor display

4 Answers 284 Views

Editor

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

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>

4 Answers, 1 is accepted

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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 />

answered on 05 Sep 2014, 04:51 PM

editoricon.png

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Custom toolbar button ImageUrl is missing in editor display

4 Answers, 1 is accepted