Use div instead of span when applying styles

5 posts, 0 answers
  1. Scott Schluer
    Scott Schluer avatar
    2 posts
    Member since:
    Sep 2009

    Posted 10 Sep 2009 Link to this post

    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!
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 15 Sep 2009 Link to this post

    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"nullfalse); 
                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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott Schluer
    Scott Schluer avatar
    2 posts
    Member since:
    Sep 2009

    Posted 15 Sep 2009 Link to this post

    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?



  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 18 Sep 2009 Link to this post

    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.
  6. Stepahnie
    Stepahnie avatar
    1 posts
    Member since:
    May 2016

    Posted 27 Jul in reply to Rumen Link to this post

    Hey Rumen

    Where do I place the following solution in my sitefinity website

    Thanks

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017