ApplyClass: wrapping multiple paragraphs

[Jon]

We are using RadEditor in our article management system.

I can apply a CSS class to a paragraph by using the ApplyClass tool (which will ad a <span class="className"> inside the paragraph. However, if i tried to select multiple paragraphs, it also wrap the content with the <span> tag for every paragraph. What I want to achieve is to have a <div class="className"> wrapping those multiple paragraphs. Can this be achieved?

e.g.

ORIGINAL:
<p>This is the first paragraph.</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
<ol>
    <li>This is the first list item</li>
    <li>This is the second list item</li>
</ol>

OUTPUT:
<p class="className">This is the first paragraph.</p>
<p><span class="className">This is the second paragraph</span></p>
<p><span class="className">This is the third paragraph</span></p>
<ol>
    <li><span class="className">This is the first list item.</span></li>
    <li><span class="className">This is the second list item.</span></li>
</ol>

EXPECTED OUTPUT:
<div class="className">
<p>This is the first paragraph.</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
<ol>
    <li>This is the first list item</li>
    <li>This is the second list item</li>
</ol>
</div>

[Rumen]

Hello Jon,

Here is a base example which demonstrates how to overwrite the Apply Class command. Feel free to further enhance the code to better match your scenario:

<script type="text/javascript">

    function OnClientCommandExecuting(editor, args) {

        //The command name

        var commandName = args.get_commandName();

 

        if (commandName == "ApplyClass") {

            var html = editor.getSelection().getHtml(); //get the selected HTML content


 

            editor.pasteHtml("<div class='" + args.get_value() + "' />" + html + "</div>");

            args.set_cancel(true);

        }

    }

</script>

<telerik:RadEditor runat="server" OnClientCommandExecuting="OnClientCommandExecuting"

    ImageManager-ViewPaths="~/Images" ImageManager-UploadPaths="~/Images" ID="RadEditor1">

    <Content>

         

    <p>This is the first paragraph.</p>

    <p>This is the second paragraph</p>

    <p>This is the third paragraph</p>

    <ol>

        <li>This is the first list item</li>

        <li>This is the second list item</li>

    </ol>

 

    </Content>

</telerik:RadEditor>

All the best,
Rumen
the Telerik team