pasteHtml not working correctly

2 posts, 0 answers
  1. James Miller
    James Miller avatar
    1 posts
    Member since:
    Aug 2009

    Posted 28 Sep 2015 Link to this post

    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>");
        else {
            alert("Please, select some text!");


    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:

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

    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?


  2. Ianko
    Ianko avatar
    1956 posts

    Posted 30 Sep 2015 Link to this post

    Hello James,

    For such situations you can use the FormatBlock command, a.k.a. Paragraph Styles tool—

    You can also use the same programmatically to achieve the expected results with a custom tool:
    <telerik:RadEditor runat="server" ID="RadEditor1">
                <telerik:EditorTool Name="Test" />
                <telerik:EditorTool Name="FormatBlock" />
            <telerik:EditorParagraph Tag="div" Title="Div" />
           <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>
        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");
      "FormatBlock", commandArgs);
            else {
                alert("Please, select some text!");

    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
Back to Top