Using the RadEditor FormatSet with custom CSS selectors

2 posts, 0 answers
  1. Bre
    Bre avatar
    4 posts
    Member since:
    Jan 2011

    Posted 23 May 2013 Link to this post

    We are able to declare a custom styles list correctly.  The issue that we have is when we apply a custom style to a selection the RadEditor defaults to wrapping the selection in "Font" tags.  We want it to wrap in "Div" tags, instead.

    Given the following HTML code, before applying styles:

    <p>my text document looks kind of like this.
    And sometimes I highlight a whole tag like this:</p>
      
    <p>MY HEADER</p>
      
    <p>or maybe I highlight text INSIDE OF THIS P TAG and turn it into a subparagraph.</p>

    Here is what we get when we apply styles:

    <p>my text document looks kind of like this.
    And sometimes I highlight a whole tag like this:</p>
      
    <p class="section header">MY HEADER</p>
      
    <p>or maybe I highlight text <FONT class="section subparagraph">INSIDE OF THIS P TAG</FONT> and turn it into a subparagraph.</p

    And here is what we want (The <p> tags for MY HEADER and the <FONT> tags inside the second sentence to be <div> tags):

    <p>my text document looks kind of like this.
    And sometimes I highlight a whole tag like this:</p>
      
    <div class="section header">MY HEADER</div>
      
    <p>or maybe I highlight text <div class="section subparagraph">INSIDE OF THIS P TAG</div> and turn it into a subparagraph.</p>

    What and how is the best possible way to make this adjustment?

    We are using 2013 Q1 controls, in an ASP.NET C# project.

    Respectfully,
    Bre
  2. Joana
    Admin
    Joana avatar
    205 posts

    Posted 28 May 2013 Link to this post

    Hello Bre,

    In order to achieve the described behavior you might create a custom filter to replace the font tags with div. This demo and this article show how you can create such a custom filter.  Another thing you can try is to call a function OnClientCommandExecuted that will replace the font tags if specific custom command is invoked. The following code shows an example how you can replace all font tags and it will work only if you want to replace all matches of the font tag. You will need to modify it to make it work in the specific scenario you want.

    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuted="OnClientCommandExecuted">
    </telerik:RadEditor>
     
    <script>
     
        function OnClientCommandExecuted(editor, args) {
            var commandName = args.get_commandName();
            if (commandName.indexOf("ApplyClass") > -1) {
     
                var content = editor.get_html();
                var cleanContent;
                cleanContent = content.replace(/font/g, "div");
                editor.set_html(cleanContent);
     
            }
        }
    </script>

    As an example, you can replace all subparagraphs by adding this code to the function:

    var subPfonts = $telerik.$("font.subparagraph", content).toArray();
     
    Array.forEach(subPfonts, function(node) {
    Telerik.Web.UI.Editor.Utils.replaceNode(node, "div");
    });


    I hope you find this information helpful.

    Regards,
    Joana
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top