Custom CSS Classes

[Neil]

I have the following in my tools file XML, when I remove a class, it is removed from the editor.  However, when I add a class entry and associated .class definition in the style sheet, I do not get the class in the styles drop-down in the editor.

<classes>
    <class name="Photo (Left)" value=".photo-left"></class>
    <class name="Photo (Right)" value=".photo-right"></class>
 </classes>

[Rumen]

Hi Neil,

If your page does not contain any css classes and you try set an item in the dropdown with the CssClasses. class declaration , e.g.

<class name="Photo (Left)" value=".photo-left"></class>

then the Photo (Left) item will be not populated, because the .photo-left class does not exist on the page.

The CssClasses collection does not add classes, it restrict the existing classes to be loaded in the Apply Class dropdown.

What you should also do is to make sure that the .photo-left class exists on the page with RadEditor or in an external CSS file which is exported through the CssFiles property.

Best regards,
Rumen
the Telerik team

[Neil]

Thanks Rumen.  

My two examples Photo (left) and photo (right) are working great, when I add a third style to the <classes> block in the tools file and add the associated css definitions in the style sheet (right below the photo classes) they are not being displayed in the Apply Class drop down.

[Rumen]

Hello Neil,

Is the third (newly added) class defined on the page with RadEditor? Can you please isolate the problem in a sample working project and send it for examination by opening a support ticket?

Best regards,
Rumen
the Telerik team

[Fit2Page]

Hi Rumen,

 

I don't know if the procedure for population of the Class dropdown has changed, but I discover the following behavior:

 

In toolsfile I have:

 

  <classes>
    <class name="Not working" value=".mt-0" />

<class name="Working" value=".lead" />

</classes>

 

In RadEditor I have as content:

 

<a href="#" target="_blank">Lorem</a>

 

Class dropdown shows as captured.

What I can find is that all classes which are defined as:

.mt-0,mx-0{} in the linked CSS are not shown.

 

On the other hand class defined as:

 

.lead{} are shown correctly.

 

Can you reproduce this behavior?

 

Marc

 

 

[Rumen]

Hi Marc,

I tested the reported scenario and I wasn't able to reproduce it.

For your convenience, I recorded a short video demonstrating my test. Am I missing something?

I have also attached my proj files.

Regards,
Rumen
Progress Telerik

[Fit2Page]

The clue lies herein that you define:

 

    <style>
        .mt-0 {
            color: red;
        }

        .lead {
            background-color: blue;
        }
    </style>

 

But in almost all CSS cases the syntax is more like:

    <style>
        .mt-0,.mx-0 {
            color: red;
        }

        .lead {
            background-color: blue;
        }
    </style>

 

Watch the concatenated styles seperated by comma.

I tested and those particular styles are not picked up by the dropdown.

 

Hope you can reproduce now, Marc

[Rumen]

Hi Marc,

This is by design. If RadEditor starts to parse the class strings after the comma, this will drastically decrease the editor and ApplyClass dropdown performance. If you want you can write your own parsing mechanism and populate the classes in your own custom dropdown. After that you can apply the selected class to the selected content by using the editor.Fire("ApplyClass", oTool) method.

 

Regards,
Rumen
Progress Telerik