Custom toolbar button ImageUrl is missing in editor display

5 posts, 0 answers
  1. Andy
    Andy  avatar
    6 posts
    Member since:
    Aug 2011

    Posted 02 Nov 2011 Link to this post

    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>

  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 03 Nov 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy  avatar
    6 posts
    Member since:
    Aug 2011

    Posted 03 Nov 2011 Link to this post

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

  5. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 05 Sep 2014 Link to this post

     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
  6. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 05 Sep 2014 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017