Images for Custom commands in radeditor are not appearing

7 posts, 2 answers
  1. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 21 Jan 2013 Link to this post

    Hello,

    I am using the rad editor to manipulate the html contents on my site, I have added some commands to the rad editor which are shown when use right clicks in the editor area. Problem is that images are not showing see the attached image for details...

    Here is my code..

    //Create a draft editor tool.
    EditorTool SaveDraftTool = new EditorTool();
    SaveDraftTool.Text = "Spara utkast";
    SaveDraftTool.Name = "SaveDraft" + this.ContentItemId.ToString(); //creating a unique command name so that correct article draft is saved.
    SaveDraftTool.ImageUrl = "/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png";
    SaveDraftTool.ImageUrlLarge = "/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png";
     
    EditorTool DeleteDraftTool = new EditorTool();
    DeleteDraftTool.Text = "Redeara utkast";
    DeleteDraftTool.Name = "DeleteDraft" + this.ContentItemId.ToString(); //creating a unique command name so that correct article draft is saved.
    DeleteDraftTool.ImageUrl = "/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png";
    DeleteDraftTool.ImageUrlLarge = "/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png";

    Hope this is enough information to figure out the problem... I can provide more information if required!!

  2. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 21 Jan 2013 Link to this post

    More information:
    I have tried to set the background image url, in browser and it works, see the attached images. 
    It just proves that the Image url is correct!!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 22 Jan 2013 Link to this post

    Hi,

    To style the context menu items you need to set CSS classes for them on the page with the editor, e.g.

    <style>
    .SaveDraft1634
    {
        background-image: url('path_to_image.png');
    }
    </style>

    Regards,
    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.
  5. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 22 Jan 2013 Link to this post

    Hi,

    I am confused now,
    Can't we use the property "ImageUrl"!!

    SaveDraftTool.ImageUrl = "url to image"
  6. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 22 Jan 2013 Link to this post

    I have tried this  code

    string CustomCommandsCssStyle = "<style> ." + SaveDraftTool.Name + " { background-image: url('/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png'); } " +
                                    " ." + DeleteDraftTool.Name + " { background-image: url('/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png'); } </style>";
     
                System.Web.UI.Page LoadedWebPage = (System.Web.UI.Page)HttpContext.Current.Handler;
                if (!LoadedWebPage.ClientScript.IsStartupScriptRegistered("savedraftandDeletedraftCss" + base.ContentItemId.ToString()))
                    LoadedWebPage.ClientScript.RegisterStartupScript(this.GetType(), "savedraftandDeletedraftCss" + base.ContentItemId.ToString(), CustomCommandsCssStyle);

    It is adding the style in page as i can see it in page source, but still no images are appearing??
  7. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 23 Jan 2013 Link to this post

    Ok, I got this solved by adding "!important" in css.

    Thank you for this tip.  It will be nice if you can just give some explanation that why we can't use the property "ImageUrl"!!

    Telerik Yahoooooo :)
     
  8. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 23 Jan 2013 Link to this post

    Hello,

    Note that the ImageUrl and ImageUrlLarge properties work only for the RibbonBar toolbar, but not for the Default. The default toolbar of RadEditor is another implementation based on image sprites and for this reason the developer should specify the new icons with CSS classes instead of a property.

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