[Solved] Apply CSS problem

[David]

When editing text I click within text in H2, then click the H2 in the Dom path to select the tag.. and then select a class in the ApplyCss dropdown.
The editor inserts a span tag with the class applied.  I tried the online demos and it did the same thing.  I tried a  'RadEditor for asp.net' demo and it applied to the H2, as expected. 

I also tried applying a class to paragraphs, selecting via dom path,  and it always inserted a span tag, with the class applied.

Did I miss a config to prevent this?

Additionally, should a "element.class" limit which elements the editor will apply to?  Like, H2.big would only apply to H2 tags  in the edit view?  (would be a great feature)

Thanks,
David

[Rumen]

Hi David,

We are aware of the SPAN styling behavior and it is logged in our bug tracking system for enhancement. We will do our best to fix this problem in one of the upcoming updates of the control.

In regards to your second question: You can implement your scenario by enhancing the code solution below, which demonstrates how to handle the ApplyClass command and if the selected element tag name in the content area and the selected dropdown class fit then to apply the class to the element:


<style>
    .h2 {font-size: 30px; color: red;}
</style>
...

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
   var commandName = args.get_commandName();
  
   var val = args.get_value();     //returns the value of the selected dropdown item
   var selElem = editor.getSelectedElement();
   var tagName = selElem.tagName.toLowerCase();
   if (commandName == "ApplyClass")
   {
        if (val.indexOf(tagName) > -1)
        {
           
        }
        else
        {
            args.set_cancel(true);
        }
   }
}
</script>
<telerik:RadEditor OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1" runat="server">
    <Content>
        <h1>test content</h1>
        <h2>sample content</h2>
        <h2>sample content 123</h2>
    </Content>
</telerik:RadEditor>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[David]

"We are aware of the SPAN styling behavior and it is logged in our bug tracking system for enhancement. We will do our best to fix this problem in one of the upcoming updates of the control."

I hope you guys can do something with this, soon...
Just seems it should be, to me anyway, that selected tagname should get the class-- not an inserted span, or other.
I've implemented a pretty solid workaround, for now, but would be great if didn't require it.  If there's a sound reason for the current behaviour, that I'm totally ignorant to (.. very likely), than maybe add a property to the editor that can select "ApplyCssMode", or some'n(??)

Thanks!

[Rumen]

Hi David,

In the previous quarter Q2 2008 our efforts were concentrated on implementing new features and controls. For the next Q3 we do not plan to produce new features and controls and we will do our best to address all bugs and glitches reported by our clients. This means that we will try to implement your request for Q3 2008 of RadControls for ASP.NET AJAX.

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Pete]

Hi,

It's been a while since I checked up on this, has this problem been resolved now?

thanks
Pete

[Rumen]

Hi Pete,

Yes the following problem is fixed in the latest Q3 SP2 2008 version of RadControls for ASP.NET AJAX:

" When editing text I click within text in H2, then click the H2 in the Dom path to select the tag.. and then select a class in the ApplyCss dropdown.
The editor inserts a span tag with the class applied.  I tried the online demos and it did the same thing.  I tried a  'RadEditor for asp.net' demo and it applied to the H2, as expected. "

For your convenience I have attached a video demonstrating my test.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Brad]

Good evening:

I've watched the video and confirmed the behavior in your latest Q309 version of the editor.  However, it only appears to apply the styles to the selected H1 tag if the H1 tag exists in the HTML already.  Because we're dealing with a very unsophisticated end-user, we need them to be able to highlight a text selection, and then turn the selected text into the H1 tag.  When we do that using the style selector, even if the style is commented as the H1, it still inserts only a SPAN tag.

How can we use that to assign an H1 tag specifically?

Brad

[Rumen]

Hi Brad,

If you want to highlight a text selection, and then turn the selected text into the H1 tag then you should use the FormatBlock tool of RadEditor. See this demo example: Paragraph Styles.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joel Kraft]

The behavior of the "Apply CSS" drop-down list has always been a concern of mine, and I've never been able to get it to work in the way I would expect it to work.

• I agree that the original error, inserting a span immediately inside of a target tag instead of applying it to the tag, has been addressed.

• There was also a piece of JS code supplied that would cancel the application of a style if the entire correct element is not selected.
• I also see how the block styles drop-down can be used to style paragraph types.

Now Brad and I are working with very unsophisticated users. I place great constraints on what our users can do, and we have extensive post-processing of the editor content to wipe out many things that the editor allows them to do that are against our guidelines. The inappropriate processing of the CSS dropdown has always been an issue.

All of our CSS is constrained to a specific class. For example:
        <TELERIK:EditorCssClass Name="Backround (Light Theme)" Value="tr.THEMELIGHTBG" />
        <TELERIK:EditorCssClass Name="Backround (Dark Theme)" Value="tr.THEMEDARKBG" />
        <TELERIK:EditorCssClass Name="Background (Light Grey)" Value="tr.GREYLIGHTBG" />
        <TELERIK:EditorCssClass Name="Backround (Medium Grey)" Value="tr.GREYMEDIUMBG" />
        <TELERIK:EditorCssClass Name="Backround (Dark Grey)" Value="tr.GREYDARKBG" />
        <TELERIK:EditorCssClass Name="Photo (Standard)" Value="img.photo" />
        <TELERIK:EditorCssClass Name="Photo (Float Left)" Value="img.photoleft" />
        <TELERIK:EditorCssClass Name="Photo (Float Right)" Value="img.photoright" />

I would like the apply-CSS to behave in a specific way when a tag is specified:

1. If the specified tag type is selected, then apply it to the tag.
2. If the specified tag type is a parent of the current tag or cursor position, then apply the class to that tag.
3. If the specified tag is not a parent of the current tag or cursor position, ignore it.  (It would be preferable to not have these items show up in the list when you expand it, but I understand that it may not be not practical.)

Right now the user can select a bunch of text, or an unrelated tag, and apply these styles.  They will be either applied to the wrong tag, or a span will be added for the style.  Neither of these behaviors makes any sense if the style explicitly includes a tag.

Joel

[Dobromir]

Hi Joel,

The ApplyClass tool does not provide the requested functionality out-of-the box. Nevertheless, RadEditor offers the possibility to create a custom dropdown with this functionality, e.g.:

function OnClientCommandExecuting(editor, args)
{
    var commandName = args.get_commandName();
    var value = args.get_value();
    if (commandName == "CustomApplyClass")
    {
        var selElem = editor.getSelectedElement();

        if (value.indexOf(".") > 0)
        {
            var specTag = value.substr(0, value.indexOf(".")).toUpperCase();
            if (selElem.tagName == specTag)
            {
                selElem.className = value.substr(value.indexOf(".") + 1);
            }
            else if (selElem.parentNode.tagName == specTag)
            {
                selElem.parentNode.className = value.substr(value.indexOf(".") + 1);
            }
            else
            {
                alert("Something!");
            }
        }
        args.set_cancel(true);
    }
}
function setDropdownValue(editor, toolName, value)
{
    var tool = editor.getToolByName(toolName); //get the tool executing the command
    tool.get_element().getElementsByTagName("SPAN")[0].innerHTML = value; //set the selected value
}

For your convenience I have attached a sample project which provides the requested functionality. Feel free to further enhance the example.

Greetings,
Dobromir
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.