Configuration of RadEditor Ajax for use in a web user control

[Peter Livsey]

Hi

I am writing a web user control (ascx) that includes a RadEditor.  This control is being added to a page on one of our Sharepoint sites. 

I have got the control and the editor working, but I am not sure where to place the image files that we have created to be displayed on the custom buttons I hve added to the editor's toolbar.

The directory structure on the Sharepoint Web Front end is currently set up like this:

Inetpub
...wwwroot
......wss
.........VirtualDirectories
............80
...............App_Data
..................RadSpell (contains the editor dictionary files)
...............App_GlobalResources (contains the editor resx files)
...............EditorSetupFiles (this is where I have added our toolsfile.xml and the custom icon .gif files)

The .ascx file is stored in Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\CONTROLTEMPLATES\myCustomControls on the same web front end server.  It contains the following code:

<%@ Control Language="vb" ClassName="RadTest" %>
' include files here
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI"
Assembly="Telerik.Web.UI, Version=2008.2.723.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

<style type="text/css">
.rade_toolbar.Default .InsertAbbr
{
   background-image: url(~/EditorSetupFilesT/icon_abbreviation.gif);
}
.rade_toolbar.Default .InsertBlockQuote
{
   background-image: url(~/EditorSetupFiles/icon_blockquote.gif);
}
.rade_toolbar.Default .InsertQuote
{
  background-image: url(~/EditorSetupFiles/icon_quote.gif);
}
</style>

<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        litEditCharges.Text = "You can edit charges here..."
 myEditor.content = "center centre some text here"
    End Sub

</script>
 
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:Literal runat="server" ID="litEditCharges"></asp:Literal>
<telerik:RadEditor Runat="server" id="myEditor" ToolsFile="~/EditorSetupFiles/ToolsFile.xml" Language="en-GB" EditModes="Design, Html" SpellCheckSettings-DictionaryLanguage="en-gb" >
   <Tools>
       <telerik:EditorToolGroup >
           <telerik:EditorTool Name="InsertAbbr" Text="Insert Abbreviation" />
           <telerik:EditorTool Name="InsertBlockQuote" Text="Insert Block Quote" />
           <telerik:EditorTool Name="InsertQuote" Text="Insert Quote" />
       </telerik:EditorToolGroup>
   </Tools>             
</telerik:RadEditor>

    <script type="text/javascript">
    //<![CDATA[
    Telerik.Web.UI.Editor.CommandList["InsertAbbr"] = function(commandName, editor, args)
    {
   //javascript code for function
   }
    };
   
    Telerik.Web.UI.Editor.CommandList["InsertBlockQuote"] = 
     function CustomDialogCommand(commandName, editor, oTool) 
         { 
    //javascript code for function
            };

    Telerik.Web.UI.Editor.CommandList["InsertQuote"] = 
     function CustomDialogCommand(commandName, editor, oTool) 
         { 
   //javascript code for function
            };

    //]]>
    </script>

Using this the icons show up completely blank.  If I change the name of the skin in the css declaration the button has a (!) icon, so I think the problem is that the icon files are in a directory that cannot be read. 

Thanks for any help
Peter

[George]

Hi Peter,

Thank you for the provided information. Could you please try the following:

• Set !important to the Icons
  <style type="text/css">
    .rade_toolbar.Default .InsertAbbr
    {
       background-image: url(~/EditorSetupFilesT/icon_abbreviation.gif) !important;  
    }
    .rade_toolbar.Default .InsertBlockQuote
    {
       background-image: url(~/EditorSetupFiles/icon_blockquote.gif) !important;
    }
    .rade_toolbar.Default .InsertQuote
    {
      background-image: url(~/EditorSetupFiles/icon_quote.gif) !important;
    }
  </style>
   
• Put the icon files into the LAYOUTS folder (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS) and set the icon paths as follows: 
  <style type="text/css">
    .rade_toolbar.Default .InsertAbbr
    {
       background-image: url(/_layouts/EditorSetupFilesT/icon_abbreviation.gif) !important;
    }
    .rade_toolbar.Default .InsertBlockQuote
    {
       background-image: url(/_layouts/EditorSetupFiles/icon_blockquote.gif) !important;
    }
    .rade_toolbar.Default .InsertQuote
    {
      background-image: url(/_layouts/EditorSetupFiles/icon_quote.gif) !important;
    }
  </style>

It is important to make sure that the images can be accessed. I hope this helps.

Best regards,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

Thanks a lot, that did exactly what we needed.