[Solved] Using the RadEditor FormatSet with custom CSS selectors

[Bre]

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

[Joana]

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