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

Configuration of RadEditor Ajax for use in a web user control

2 Answers 97 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Peter Livsey
Top achievements
Rank 1
Peter Livsey asked on 26 Sep 2008, 07:28 AM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
George
Telerik team
answered on 30 Sep 2008, 08:32 AM
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.
0
Peter Livsey
Top achievements
Rank 1
answered on 30 Sep 2008, 03:15 PM
Thanks a lot, that did exactly what we needed.
Tags
Editor
Asked by
Peter Livsey
Top achievements
Rank 1
Answers by
George
Telerik team
Peter Livsey
Top achievements
Rank 1
Share this question
or