This is a migrated thread and some comments may be shown as answers.

pasteHtml not working correctly

1 Answer 35 Views
Editor
This is a migrated thread and some comments may be shown as answers.
James Miller
Top achievements
Rank 1
James Miller asked on 29 Sep 2015, 03:27 AM

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?

 

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 30 Sep 2015, 10:50 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Editor
Asked by
James Miller
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or