+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / RadEditor: How to use images for enumeration?

RadEditor: How to use images for enumeration?

2 posts, 0 answered
  1. Carsten Koster
    Carsten Koster avatar
    12 posts
    Registered:
    05 Sep 2006
    25 Aug 2009
    Link to this post
    Hello everyone,

    I want to embed my own icons for enumeration in the RadEditor. I can't find a way to get make this happen.

    I successfully embedded my own paragraphs, css classes (and so on..) with the help of the EditorToolsFile.xml.

    My goal is this: you simply mark your text and choose a css-class (e.g. icon1) and this css-class/enumeration takes care of the rest.

    Currently I tried it this way, but the images doesn't get shown (even if I enter "url("../icons)" or "url("projectname/icons")...

    style_telerik.css (file):

    .icon { 
            background: transparent url(“~/icons/enum/nav_up_right_green.png”) no-repeat 0px 50%; 
            padding-left: 20px; 

    EditorToolsFile.xml:

    <classes> 
    ... 
    ... 
      <class name="icons" value=".icon" /> 
    </classes> 
     
      <cssFiles> 
        <item name="~/App_Themes/xxxxxxx/css/style_telerik.css" /> 
      </cssFiles> 


    Another way was to create a dropdown field in the toolbar of the RadEditor. The images get shown, but the drag & drop logic behind is missing and I'm not sure where I have to put it :)

        <tool name="Icons" Name="icons" type="dropdown" PopupWidth="200px" PopupHeight="150px"
         <item name="&lt;img src='/projectname/icons/enum/nav_up_right_green.png'/> " value="~/icons/enum/nav_up_right_green.png" /> 
         <item name="&lt;img src='/projectname/icons/enum/nav_up_right_red.png'/> " value="~/icons/enum/nav_up_right_red.png" /> 
        </tool> 


    I hope you can follow me :) Every answer is gladly appreciated.

    Carsten
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    28 Aug 2009
    Link to this post
    Hello Carsten Koster,

    Can you try the following way:

    1. Crate a simple css class under your Theme folder ( App_Themes/MyTheme)

    .img 
        background-color: Lime; 
        background-image:url('Images/bg.gif'); 

    2. In this folder - MyTheme create new folder - Images ( so you will have the following structure MyTheme/Images.

    In Images folder put your image.

    3. Then load the css file and our img class.

     public void Page_Load(object sender, EventArgs e) 
        { 
            textEditor.CssFiles.Add("~/App_Themes/MyTheme/style.css"); 
            textEditor.CssClasses.Add("Img Class"".img");  
        } 


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
2 posts, 0 answered