Images for Custom commands in radeditor are not appearing

[shadow]

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

[shadow]

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

[Rumen]

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

[shadow]

Hi,

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

SaveDraftTool.ImageUrl = "url to image"

[shadow]

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

[shadow]

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 :)
 

[Rumen]

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