problem applying CSS classes

[Stewart Ellis]

Hi I using the dom inspector to select tags and apply styles. I am having a number of problems:

1. sometimes when I select an element using the dom inspector, the dom inspector disappears altogether and although the item is hightlighted in the editor window, applying a style does nothing

2. sometime when I select an element using the dom inspector and apply a css class I end up with a span tag with the class in it, instead of the class applied to the desired tag

3. sometime when I select an element and apply a css class I end up with class="RadEDomMouseOver" applied to the tag - how can your code end up in my source?

4. sometimes applying css class does nothing

5. sometimes the class gets applied to the topmost tag in the editor instead of the desired tag


I've been using radeditor for a number of years, building CMSs for clients that have no technical ability. I have found lately that the kind of flaky behavior described above seems to be occurring quite a bit. I can go into the source to deal with it, but I don't expect clients to. Are there published best practices that should be used for editing content? I don't mind supporting my own code, but I expect the tool to be as "end user proof" as possible

Thanks

[Dobromir]

Hi Stewart,

We are not aware of these issues and you are the first one to report them. I tried to reproduce them but to no avail.Could you please provide more detailed information regarding specific scenario?

• Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?
• Under which browser and its version the problem occurs?
• Are you able to reproduce the problem on the live demos? If so, could you please provide the exact steps the need to be executed in order to reproduce the issue?
• Could you please provide a simple fully runnable project reproducing the problem so we can investigate it further?

Looking forward to hearing from you,
Dobromir
the Telerik team

[Stewart Ellis]

Thanks for the reply. Let's start with this:

I went to you main demo page - http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx 

In chrome  - senario 1:

1. I placed my cursor to the right of the table that contains the browser icons. The cursor was as tall as the table
2. I hit return and then typed a number of words, hitting return a few times so I had 4 lines to text. 
3. I selected all the text and clicked the bullet icon to turn it into an unordered list. At that point the dom inspector showed the ul
4. with the new list still selected I applied the list square style
5. I then clicked away
6. I then placed my cursor within the list and clicked on the ul in the dom inspector. The dom inspector disappeared

In chrome - senario 2: 

1. I followed steps 1 through 3 above and then clicked away from the list.
2. I then placed my cursor within the list and clicked on the ul in the dom inspector, to select the element
3. although the list was selected, the dom inspector disappeared
4. I carried on and with the list selected, I applied the list square style
5. I ended up with the following source:

<ul class="RadEDomMouseOver">

    <li><span class="listsquare">sdfasd f</span></li>

    <li><span class="listsquare">asdf asdf</span></li>

    <li><span class="listsquare">asdf asdffa sdf</span></li>

    <li><span class="listsquare">a sdfasdf</span></li>

</ul>

<ul class="RadEDomMouseOver">

    <li><span class="listsquare">sdfasd f</span></li>

    <li><span class="listsquare">asdf asdf</span></li>

    <li><span class="listsquare">asdf asdffa sdf</span></li>

    <li><span class="listsquare">a sdfasdf</span></li>

</ul>

<ul class="RadEDomMouseOver">

    <li><span class="listsquare">sdfasd f</span></li>

    <li><span class="listsquare">asdf asdf</span></li>

    <li><span class="listsquare">asdf asdffa sdf</span></li>

    <li><span class="listsquare">a sdfasdf</span></li>

</ul>

<ul class="RadEDomMouseOver">

    <li><span class="listsquare">sdfasd f</span></li>

    <li><span class="listsquare">asdf asdf</span></li>

    <li><span class="listsquare">asdf asdffa sdf</span></li>

    <li><span class="listsquare">a sdfasdf</span></li>

</ul>

<ul class="RadEDomMouseOver">

    <li><span class="listsquare">sdfasd f</span></li>

    <li><span class="listsquare">asdf asdf</span></li>

    <li><span class="listsquare">asdf asdffa sdf</span></li>

    <li><span class="listsquare">a sdfasdf</span></li>

</ul>

<ul class="RadEDomMouseOver">
<li><span class="listsquare">text</span></li>
<li><span class="listsquare">text</span></li>
<li><span class="listsquare">text</span></li>
<li><span class="listsquare">text</span></li>
</ul>


in ie8:

1. I placed my cursor to the right of the table that contains the browser icons. The cursor put itself beneath the table
2. I hit return and then typed a number of words, hitting return a few times so I had 4 lines to text. 
3. I selected all the text and clicked the bullet icon to turn it into an unordered list. At that point the dom inspector showed the ul
4. with the new list still selected I applied the list square style
5. I then clicked away
6. I then placed my cursor within the list and clicked on the ul in the dom inspector.
7. I ended up with the same source as in chrome scenario 2

in firefox 3

1. I placed by cursor to the right of the table that contains the browser icons. The cursor drops itself within a cell in theright most column instead of outside the table. I then put the cursor beneath the table
2. I hit return and then typed a number of words, hitting return a few times so I had 4 lines to text. 
3. I selected all the text and clicked the bullet icon to turn it into an unordered list. At that point the dom inspector showed the ul
4. I then clicked away
5. I then placed my cursor within the list and clicked on the ul in the dom inspector to select the list
6. I then applied the square list style to the ul.
7. The square list style did not get applied to my desired list. Instead, it got applied to the list above the table of browser icons (the one that starts with "out-of-the-box...

[Dobromir]

Hi Stewart,

Thank you for bringing this problem to our attention and for the very detailed explanation. I have logged it into our ToDo list for further investigation and we will do our best to fix it for one our upcoming releases. Unfortunately, I am unable to provide a suitable workaround at this moment.

Please excuse us for the inconvenience.

Kind regards,
Dobromir
the Telerik team

[Stewart Ellis]

Thanks.

Please don't let this one drift away. The success of our  CMS depends on predictable ease-of-use for non-technical users.

[Dobromir]

Hi Stewart,

We are working on these issues and will do our best to have them fixed for one of the upcoming releases. Unfortunately, I am unable to provide a firm estimate for when it will be available.

You can find the PITS item under the Your Tracked Issues section of our Public Issue Tracking System.


Kind regards,
Dobromir
the Telerik team

[Kevin Gunther-Canada]

For many reasons I like the RADEditor for Sharepoint.  I've heard from too many people who use Ektron/SiteCore/Sharepoint/SiteFinity that the editor is extremely annoying and confusing to work with (e.g., inserts stray </span> and </p> tags, causing HUGE numbers of <p> tags to be inserted erroneously)! 

[Rumen]

Hello Kevin,

One of RadEditor's main goals is to produce valid XHTML content. If you experience any specific problems when editing and producing content with RadEditor, please provide steps to reproduce the issues and we will research and fix them with high priority.

Many of the <p> tag problems were due to loading or pasting non well formed HTML content in the editor. We improved significantly the ConvertToXhtml filter of RadEditor and fixed the <p> tag multiplication problem in the latest version of RadControls for ASP.NET AJAX Q1 2011.

All the best,
Rumen
the Telerik team