Controling Apply CSS dropdown and rendering

[Anders]

Hi,

I want to display only a subset of classes in the Apply CSS drop-down list.
I have two CSS files, and I want to render the document with the content of both in the editor, but I want only the classes of one of them to be selectable in the dropdown list.

I noticed that the drop-down list is populated when you first click on the item. And it then reads all the CSS classes that are loaded in the document.

How can I either trigger the population of the drop-down list or otherwise get the required behaviour?

I tried setting the CSSFiles property either programmatically or via the Tools.xml file, but I then noticed I could delay-load a CSS file in the iframe, but I need to trigger the event, otherwise I get all classes, and it becomes rather messy.

I do now know before hand what classes are defined in the CSS-files as they might be a number of different setups for our different customers.

I hope you can help me.

[Stanimir]

Hi Anders,

You can control which classes to be loaded in the dropdown by setting the CssClasses collection: Review the following online help article: http://www.telerik.com/help/aspnet-ajax/editor-css-styles.html

If you don't find the article helpful, provide me with a sample page with styles and an editor in it. Explain in a step by step scenario what behavior exactly you are expecting and I will implement a custom workaround for you.

All the best,
Stanimir
the Telerik team

[Anders]

I've seen that I can set the classes programmatically, but our solution has a number of different customers, each with a different set of classes defined, so I don't know beforehand what those classes may be.

Here's the scenarion.
I have an editor loading a complete page in iframe mode, complete in the sense that it includes, html, head and body tags. In the head-tag I link two CSS files: global.css and webcontent.css. Global.css contains information about DIV spacing, font-family, borders, margins, etc. WebContent contains a number of CSS classes defining, for example, Header, Title, Subheader, etc.

So, I would like the editor to render the HTML with the complete set of classes, so that borders and spacings are correct, but I do not want the users to be able to select in the CSS-dropdown an item like 'div2pxBorderBlue', but ONLY Header, Title, Subheader and so forth.

I've tried omitting Global.css from the HTML, I get the classes I want in the dropdown list, but the document is not rendered properly.
I've tried adding an external CSS file to the editors CSSFiles collection, both via the Tools.xml file or through code, but to no avail. All the classes currently loaded in the document are displayed in the dropdown list.

I tried upgrading just now to the lastest version (Q3 2012) but to no avail.

I hope I make myself understood.

Thank you,
.anders

[Stanimir]

Hello Andress,

Please provide me with a sample page (including sample css as well) where the problem is reproducible. I will review the RadEditor configuration and advise you further.

Regards,
Stanimir
the Telerik team

[Anders]

Hi again Stanimir,

I have created a sample Editor page with what I am trying to achieve.

How or where should I send the file? I cannot upload it to this thread.

I sincerly hope you can advise me.

Yours,
.anders

[Anders]

Created a support ticket for this issue: 628783

Cheers,
.a

[Rumen]

Hi,

I just answered your support ticket. For your convenience I have pasted below my answer:

The CssFiles property just imports a CSS file or files in the content area of RadEditor but it does not remove the existing CSS files from it. Since you directly load the CSS files via link tags with the content through the Content property the CssFiles will not work for your scenario.

What you can do is to modify the loaded content by adding the desired CSS file according to the logged user as shown below:

Dim styles = String.Empty
Dim user1 = "Peter"
If (user1 Is "Peter") Then
    styles = "<link rel='stylesheet' href='global.css' />"
Else
    styles = "<link rel='stylesheet' href='webcontent.css' />"
End If

Dim html As String = "<html><head>" + styles + "</head><body><div class='globalDiv'>This div has a frame defined in global.css<br /><span class='header1'>This span och class header1 is defined in WebContent.css</span><br /><br />The drop down list should only contain header1 and NOT globalDiv</body></html>"

editor.Content = html

You can see my test in the following video: http://screencast.com/t/FAdCF7kpJ.




Kind regards,
Rumen
the Telerik team