Use div instead of span when applying styles

[Scott Schluer]

Hello,

Is there any way to convert the <span> tag's that the Editor uses when you apply a style from the Apply CSS dropdown into <div> tags? My styles all work quite well as div's but span's seem to break them all. I'd like it if the Editor could just apply the style as a DIV instead of a SPAN. Is this possible? I looked at content filters but that seems to require the user to go back and forth between views in order to take effect.

Thank you in advance!

[Rumen]

Hello Scott,

Please, try the following solution:

<script type="text/javascript">
function OnClientCommandExecuted(editor, args)
{
   if ("ApplyClass" == args.get_commandName())
   {
        var elem = editor.getSelectedElement();
        if (elem.tagName == "FONT")
        {
            var content = elem.innerHTML;
            var className = elem.className;
            editor.selectElement(elem);
            editor.get_document().execCommand("Delete", null, false);
            editor.pasteHtml("<div class=" + className + ">" + content + "</div>");
        }
   }
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted">
    <Content>
                sample text<br />
                sample text<br />
                sample text
   </Content>
</telerik:radeditor>

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.

[Scott Schluer]

Hi,

Thanks for the reply. It didn't quite work though. First, it doesn't seem to work in FireFox. It still applies SPAN tags in FF 3.5. IE 8 seems to work better, but not quite. Here's the original HTML code that I want to highlight and wrap in a <div> (using IE8):

<span class="subHead2">PROGRAM REQUIREMENTS</span><br />
<br />
<strong>Services</strong>: Provides mentoring and emotional support; baby food, diapers, and formula; life and parenting skills; community service referrals; monthly immunization clinic; new baby packages for pregnant mothers in their 8th or 9th month.<br />
<br />
<strong>Coordinator</strong>: Joe Smith</div>
<br />

When I highlight the code (in Design View), and Apply the appropriate CSS class with your code sample in place, here's the resulting output:

<span class="highlightContent"><span class="highlightContent">
<div class="highlightContent">PROGRAM REQUIREMENTS</div>
</span><br />
<br />
<strong>Services</strong>: Provides mentoring and emotional support; baby food, diapers, and formula; life and parenting skills; community service referrals; monthly immunization clinic; new baby packages for pregnant mothers in their 8th or 9th month.<br />
<br />
<strong>Coordinator</strong>: Joe Smith</span>

What it SHOULD look like is this:

<div class="highlightContent"><span class="highlightContent">PROGRAM REQUIREMENTS</span>
<br />
<br />
<strong>Services</strong>: Provides mentoring and emotional support; baby food, diapers, and formula; life and parenting skills; community service referrals; monthly immunization clinic; new baby packages for pregnant mothers in their 8th or 9th month.<br />
<br />
<strong>Coordinator</strong>: Joe Smith
</div>

Basically it's the entire selected text just wrapped in a DIV tag. Any ideas?

[Rumen]

Hi Scott,

Indeed, the code does not work in FF because the browser returns the inner content of the selected element instead of the selected element. Since it will be very hard or impossible to implement your scenario my recommendation is to replace all span tags in the content area with div tags when applying some class from the Apply Class dropdown. Here is the code solution that works in IE and Firefox:

<script type="text/javascript">
function OnClientCommandExecuted(editor, args)
{
   if ("ApplyClass" == args.get_commandName())
   {
        var content = editor.get_html(true);
        content = content.replace(/span/gi,"div");
        editor.set_html(content);
   }
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted">
</telerik:radeditor>

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.

[Stepahnie]

Hey Rumen

Where do I place the following solution in my sitefinity website

Thanks