pasteHtml not working correctly

[James Miller]

We have a button on our toolbar that should simply surround selected content with a <div> tag.

Telerik.Web.UI.Editor.CommandList["Test"] = function (commandName, editor, args) {
    if (editor.getSelectionHtml() !== "") {
        var content = editor.getSelectionHtml();
        editor.pasteHtml("<div>" + content + "</div>");
        args.set_cancel(true);
    }
    else {
        alert("Please, select some text!");
        args.set_cancel(true);
    }
};

 

But when this is applied to anything that starts with an HTML tag, specifically <em>, <strong>, or <sup>, then it applies the <div> tag, but then surrounds the entire div with whatever the starting HTML tag is.

 For Example,

<em>gnomes</em>: imaginary creatures

should become:

<div><em>gnomes</em>: imaginary creatures</div>

but instead becomes:

<em>
<div><em>gnomes</em>: imaginary creatures
</div>
</em>

We really don't want the entire phrase in italics. This is especially annoying with superscripts since it places everything in a superscript.

We are using the latest version of the tools. This happens consistently across Firefox, Chrome, and Opera.

How can we just surround the selected text with a <div> without surrounding the entire thing with additional HTML tags?

 

[Ianko]

Hello James,

For such situations you can use the FormatBlock command, a.k.a. Paragraph Styles tool—http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/dropdowns/paragraph-styles.

You can also use the same programmatically to achieve the expected results with a custom tool:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Test" />
            <telerik:EditorTool Name="FormatBlock" />
        </telerik:EditorToolGroup>
    </Tools>
    <Paragraphs>
        <telerik:EditorParagraph Tag="div" Title="Div" />
    </Paragraphs>
    <Content>
       <p>Some text in the content area.</p>
        <p>Some text <em>gnomes</em>: imaginary creatures</p>
        <p>Some text in the content area.</p>
    </Content>
</telerik:RadEditor>

<script>
    Telerik.Web.UI.Editor.CommandList["Test"] = function (commandName, editor, args) {
        if (editor.getSelectionHtml() !== "") {
            var commandArgs = new Telerik.Web.UI.EditorCommandEventArgs("FormatBlock", args.get_tool(), "div");
            editor.fire("FormatBlock", commandArgs);
        }
        else {
            alert("Please, select some text!");
        }
    };
</script>

Regards,
Ianko
Telerik