Adding a class to a block level item?

[Alistair]

{ text: "Highlight Error", value: ".hlError" }

This changes:

<p>Some text</p>

to

<p><span>Some text</span></p>

How can this be changed so the output is:

<p class="hlError">Some text</p>

This is also needed for adding classes to images etc.

Many thanks

[Alex Gyoshev]

Hello Alistair,

In order to apply the class via paragraphs instead of spans, you can write:

{ text: "Highlight Error", value: "p.hlError" }

This will force it to be applied always on paragraphs. There is also the context parameter that can limit where a class is shown to the user, i.e.

{ text: "Highlight Error", value: ".hlError", context: "h2" }

... will only show the class in the drop-down when the editor selection is within a h2 tag.

Regards,
Alex Gyoshev
Telerik

 

 

[Alistair]

As another example, I would like to add a class to an image.  Using the "Insert image" generates the following HTML:

<img alt="" src="http://www.telerik.com/sfimages/default-source/logos/telerik-logo-reversed.png" />

If I use the following formatting option:

{ text: "Add red class to image", value: ".red" }

I end up with: 

<span class="red"><img alt="" src="http://www.telerik.com/sfimages/default-source/logos/telerik-logo-reversed.png" /></span>

As an alternative I used the following formatting option:

{ text: "Add red class to image", value: "img.red" }

Taking the following HTML:

<img alt="" src="http://www.telerik.com/sfimages/default-source/logos/telerik-logo-reversed.png" />

and applying the above formatting option you get:

<img class="red" />

So now, we have the correct class, but the image source has been lost.  What I need is for the following code to be generated:

<img alt="" src="http://www.telerik.com/sfimages/default-source/logos/telerik-logo-reversed.png" class="red" />

When you insert an image you get the following options:

Web address
Alternate text
Width
Height

So here as well, you cannot add a class to an image.

Hopefully I have missed something really obvious and you can easliy add a class to an image (and on a more general level add a class to the currently selected HTML element)!?

[Alex Gyoshev]

Hello Alistair,

I'm afraid that we don't have such a tool at this time. As a work-around, you can use the custom tool defined in this Dojo snippet. We will consider introducing such a tool officially for future releases.

Regards,
Alex Gyoshev
Telerik