Custom tool in Tools file with icon

[Mauro]

Hi all,
I'm upgrading an app using the old RadEditor Q2 2007 to the new RadEditor AJAX Q3 2010.

I've found an issue with the tools xml file: I want to display a custom button with a custom image. In the old tools file this was declared as follows:

<tool name="mycustomtool" ShowIcon="true" ShowText="false" enabled="true"  iconurl="mycustomtool.gif" />

This causes all sorts of unexpected behaviours, but if I remove the "iconurl" property everything works fine, except for the button that doesn't of course display the image we want.

<tool name="mycustomtool" ShowIcon="true" ShowText="false" enabled="true" />

How can I display my button with the right image using the tools file?
I've been digging around for info but found nothing useful so far (including the "Adding Your Own Buttons" article and various forum threads).

Thanks
Mauro

[Rumen]

Hello Mauro,

The iconUrl property is not supported by RadEditor for ASP.NET AJAX, because its has new toolbar architecture based on image sprites. Using a new client-side model, semantic rendering, and many other innovations such as the use of css image sprites, the new RadEditor delivers minimal and well-formed output. Its new rendering and architecture allows it to be a couple of times faster than the classic ASP.NET Editor.

The only supported way to set an image to a custom tool is to provide image file for it and output the following CSS class in the page with the editor:

<style type="text/css">
.reTool .mycustomtool
{
  background-image: url(MyImage.gif);
}
</style>

Here are two demos that show how to define custom icons for custom tools:
Custom Tools
Custom Dialogs

All the best,
Rumen
the Telerik team

[Mauro]

Thanks Rumen for the quick reply.
I have added the style and now it displays the icon, but now there is another problem: the icon appears to be truncated on the right hand side. In the old version of the editor it was displayed correctly.

Is there any size limit for these icons or something similar? BTW my icon is 23w x 22h (pixels).

Thanks
Mauro

[Mauro]

Quick update just to say that I've resolved, just adding more styles to the element:

            background-position: center;
            width: 23px;

Thanks
Mauro