Editor inserting "extra" stuff.

[Angela]

If the user selects the highlighted text individually (by double clicking their mouse and highlighting the words) and paste it into an Editor, all is good.

However, if the user triple clicks to highlight the entire sentence and then paste that into an Editor, this is what shows up in the HTML view:

<div>
<div id="ctl00_Main_Content_ctl00_Main_Content_RadMultiPagePanel">
<div id="ctl00_Main_Content_RadMultiPage">
<div id="Main_Content_SummaryPage">
<div>
<div>Please load claims from QNXT Production 09/12/2025 into Test Reports.</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div id="ctl00_Main_Content_ctl00_Main_Content_ddlQuickLinksPanel">
<div id="ctl00_Main_Content_ddlQuickLinks" tabindex="0">&nbsp;</div>
</div>
</div>
</div>
</div>

It's like the "copy" action is taking some of the pieces of the page the text is on.

Is there a way to prevent this?

I still want the user to be able to copy/paste images into the Editor, but this is causing problems. In the users minds they are simply copying and pasting text.

[Rumen]

Hi Angela,

This behavior is a result of how browsers handle triple-click selection, they often select the entire block element and its parent containers, so when you paste, extra <div> elements and their attributes are included in the RadEditor content.

RadEditor does not control what is placed on the clipboard. The process works as follows:

• The browser handles the copy action and decides what HTML to include.
• A double-click selects only the text node, so only the words are copied.
• A triple-click selects the entire block element, and most browsers will copy the surrounding DIV and its attributes.
• RadEditor then receives the already-prepared HTML through the clipboard event.

Because the browser itself includes container DIVs during a triple-click copy, RadEditor receives that markup exactly as-is.

Verification steps

To confirm that this is browser behavior, please try:

1. Set StripFormattingOptions="None" and test again.
2. Paste the same content into a simple contenteditable div.
   
   

   <div contenteditable="true" style="border: 1px solid green; min-height: 200px; padding: 10px;">
       Paste your content here
   </div>

If the same unwanted DIVs appear in the editable div, this confirms that the behavior is coming from the browser, not RadEditor.

Recommended solution: Custom paste cleanup

If you want users to continue pasting images but avoid pasting large page-layout wrappers copied by triple-click, you can use the OnClientPasteHtml event to sanitize the pasted content before insertion.

The following client-side handler removes:

• ASP.NET auto-generated DIV wrappers (e.g., ctl00_Main_Content_*).
• Unnecessary container DIVs around the text.
• Attributes such as style, tabindex, and id that come from layout markup.

<script type="text/javascript">
    function OnClientPasteHtml(sender, args) {
        var html = args.get_value();

        // 1 - Remove ASP.NET auto-generated container divs
        html = html.replace(/<div[^>]+id="ctl00_[^"]+"[^>]*>/gi, '');
        html = html.replace(/<\/div>/gi, '');

        // 2 - Remove all remaining div wrappers but keep inner content
        html = html.replace(/<div[^>]*>/gi, '').replace(/<\/div>/gi, '');

        // 3 - Strip unnecessary attributes
        html = html.replace(/ style="[^"]*"/gi, '')
                   .replace(/ tabindex="[^"]*"/gi, '')
                   .replace(/ id="[^"]*"/gi, '');

        // 4 - Normalize nbsp
        html = html.replace(/&nbsp;/gi, ' ');

        // 5 - Trim whitespace
        html = html.trim();

        console.log('Original:', args.get_value());
        console.log('Sanitized:', html);

        args.set_value(html);
    }
</script>

<telerik:RadEditor 
    ID="RadEditor1"
    runat="server"
    OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>

Here is another sample script to remove all <div> tags but keep their inner content (including images):

<script type="text/javascript">
function OnClientPasteHtml(sender, args) {
    var value = args.get_value();
    var tempDiv = document.createElement("div");
    tempDiv.innerHTML = value;

    // Remove all div tags but keep their content
    var divs = tempDiv.querySelectorAll("div");
    for (var i = divs.length - 1; i >= 0; i--) {
        var parent = divs[i].parentNode;
        while (divs[i].firstChild) {
            parent.insertBefore(divs[i].firstChild, divs[i]);
        }
        parent.removeChild(divs[i]);
    }

    args.set_value(tempDiv.innerHTML);
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientPasteHtml="OnClientPasteHtml" />

 

Regards,
Rumen
Progress Telerik

[Angela]

Thank you so much! This works perfectly and you could not have made it easier for me to just plug right in and it work with no changes. I really appreciate it!

[Rumen]

Thank you for the kind words and for confirming that the solution works!