This is a migrated thread and some comments may be shown as answers.
Images for Custom commands in radeditor are not appearing
6 Answers 32 Views
This is a migrated thread and some comments may be shown as answers.
shadow
Top achievements
Rank 2
shadow asked on 21 Jan 2013, 06:14 PM
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!!

6 Answers, 1 is accepted

Sort by
0
shadow
Top achievements
Rank 2
answered on 21 Jan 2013, 06:18 PM
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!!
0
Accepted
Rumen
Telerik team
answered on 22 Jan 2013, 05:14 PM
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.
0
shadow
Top achievements
Rank 2
answered on 22 Jan 2013, 05:24 PM
Hi,

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

SaveDraftTool.ImageUrl = "url to image"
0
shadow
Top achievements
Rank 2
answered on 22 Jan 2013, 05:35 PM
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??
0
shadow
Top achievements
Rank 2
answered on 23 Jan 2013, 11:10 AM
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 :)
 
0
Accepted
Rumen
Telerik team
answered on 23 Jan 2013, 11:37 AM
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.
Asked by
shadow
Top achievements
Rank 2
Answers by
shadow
Top achievements
Rank 2
Rumen
Telerik team
Share this question
or