This is a migrated thread and some comments may be shown as answers.

How to apply a class to an element other than span

8 Answers 113 Views
Editor
This is a migrated thread and some comments may be shown as answers.
viscious
Top achievements
Rank 1
viscious asked on 26 Jun 2008, 06:10 PM
Hello.  It looks like when ussing the "Apply CSS class" drop down, the editor surronds the text with a span element and applies that class to the span.

In most situations that works just fine.

However I have a situation where I need to apply a css class to an Ordered List and an Unordered List and to an HR tag.

Is there a way to do this without going into html mode?


8 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 27 Jun 2008, 03:49 PM
Hi Eric,

For your convenience I made and attached a sample project demonstrating how to apply a class to a OL and HR tags without wrapping them in span element.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
viscious
Top achievements
Rank 1
answered on 27 Jun 2008, 05:01 PM
Hi thanks for the video

Unfortunatly I cannot reproduce what you did.

I made a video of my attempt, can you look at it and tell me what I am doing wrong?

thanks for your help

Here is my video
0
Rumen
Telerik team
answered on 30 Jun 2008, 02:37 PM
Hello Viscious,

Could you please, tell me whether your test is made in IE or Firefox? I was able to reproduce the same behavior only in Firefox, but not in Internet Explorer. What is the value of the editor's NewLineBr property in your test project?

By the way, I noticed that the first line in your test video has different formatting from the second and third ones. The ordered lists did not displayed their numbers as well, which is due most likely to some global css style on your page.

I need this information in order to open a bug entry in our bug tracking system.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
viscious
Top achievements
Rank 1
answered on 30 Jun 2008, 02:46 PM
The tests were  done in Firefox.

The value of NewLineBr is set to false

The reason the formating on the first line was different is that the first line didnt have a p tag surrounding it.  I typed the first line, pressed enter, typed the second line, pressed enter, typed the third line pressed enter.  Pressing enter created a p tag around the 2 and third line, but because I just started typing, the first line didn't get a p tag surroudning it. 

The reason the lists do not display their numbers is because our css eleminates them for the global list classes.  We use them in other areas of the site quite heavily for things like menues, etc.   That is why I have to apply a class to the OL , so that the numbers show up.
0
Rumen
Telerik team
answered on 03 Jul 2008, 08:49 AM
Hi Erick,

You can easily fix the styling problem in the content area and display the ordered lists numbers by setting the editor's CssFiles property to point to an external css file, e.g

<telerik:radeditor runat="server" ID="RadEditor1">
   
<CssFiles>
       
<telerik:EditorCssFile Value="~/Styles1.css" />
   
</CssFiles>
</
telerik:radeditor>

Thus the editor will not pick up the styles from the parent page and the ordered list will be displayed properly with numbers.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
LeBear
Top achievements
Rank 1
answered on 11 Aug 2008, 07:37 PM

Thank you for this thread.  I didn't think it was supported to add a style to a tag like this.  Unfortunately, It's not working for me. I'm using Windows Vista with Firefox 3.01.

Via a skin, I have a CSS file selected for the EditorCSSFile, and that CSS file is in the site's theme folder.  The CSS file has styles Red, Green, and Blue.  All they do is set the color.

I have content that is wrapped in any tag (I tested H1, p, and li).  I click inside the text, click on the tag name at the bottom of the page, it highlights all of the text in that tag, and then I select a style from the CSS selector.  It still puts a span tag around the text rather than applying the style to the tag.

Interestingly, I had an HR tag, but I could not select it as you did.  It ignored my clicking on it.  I saw no handles and I didn't see the tag at the bottom of the editor.  I got frustrated and clicked the line several times, and I noticed that it would toggle selecting the HR tag (as shown below the editor, but without showing handles on the line itself.)  When the HR tag was shown at the bottom, I clicked it, then selected a style.  It REPLACED the HR with a non-breaking space and wrapped it in a span!

I watched your video, and followed the steps exactly.

0
David
Top achievements
Rank 1
answered on 12 Aug 2008, 12:30 AM
http://www.telerik.com/community/forums/thread/b311D-bckktd.aspx

Important... I hope this is fixed in Q3. 

Most all of us in these forums can deal with this, but, often (certainly in my case) the end user is a client, or other,  and not a developer..  and have very little or no experience with html.

0
LeBear
Top achievements
Rank 1
answered on 12 Aug 2008, 01:16 AM

Thank you for pointing me toward this.  With the video that was provided above, it was confusing as to whether or not this was a bug.

I will (impatiently) await Q3, as this is also for non-web-savvy clients!

Tags
Editor
Asked by
viscious
Top achievements
Rank 1
Answers by
Rumen
Telerik team
viscious
Top achievements
Rank 1
LeBear
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or