Pasted text get Triplicated in IE11 in Richtext editor

[Aleksandra]

I have RichTextEditor and process paste function witch in Internet Explorer 11 not working correct, copied text get triplicated. Event that handles pasting is fired three times in IE 11. In Chrome everything is working fine.

 

  /**
    * Set the pasted data back into the RadEditor
    */
    ns.RichText.RichTextEditor.prototype.processPaste = function () {
        this.editor.get_document().body.innerHTML = Telerik.Web.UI.Editor.Utils.convertWordLists(this.editor.get_html());
        this.editor.fire("FormatStripper", { value: "WORD" });

        // Set the original content back and insert the newly pasted content at the caret position
        var pastedHTML = this.editor.get_html(true);

        // Reposition the cursor where it was before pasting and then paste the formated html there
        if (this.editorContent === "") {
            this.editorContent = "<br>";
        }
        this.editor.get_document().body.innerHTML = this.editorContent;
        this.restoreSelection();

        var range = this.editor.getSelection().getRange();
       
        range.deleteContents();
        var frag = range.createContextualFragment(pastedHTML);
        range.insertNode(frag);
        
        this.pasting = false;
    };

 

 

I think this line of code are problem

      range.deleteContents();
        var frag = range.createContextualFragment(pastedHTML);
        range.insertNode(frag);

they cause event on pasting to fire three times.

Is there any way to handle inserting pasted text different in IE in code?

[Rumen]

Hi Aleksandra,

Are you able to reproduce the problem in the live demos of RadEditor?

Do you experience this problem with the latest version of the control?

Is IE11 put in compatibility mode or not? Please note that compatibility note is not supported - https://www.telerik.com/support/kb/aspnet-ajax/details/different-appearance-in-internet-explorer-on-local-and-production-servers.

You can also attach to the OnClientPasteHtml event of the editor and see what is returned by the args.get_value() method - see the example in the end of the description:

<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
    var commandName = args.get_commandName();
    var value = args.get_value();
    
    if (commandName == "Paste")
    {
       alert(value);
    }
}
</script>

Regards,
Rumen
Progress Telerik

[Aleksandra]

I found http://fdsrv.fire-defence.com/editordemo.aspx its working fine in IE, but I am using Richtext editor.  

I attach event 
 $(this.editor.get_document()).on("paste", $.proxy(this.handlePaste, this));

from which processPaste function is called, in Chrome everything working fine. I also update compatibility from that article not working after that.

 

Is there way to modify this lines of code to working in IE, maybe it is problem in this lines.

      var range = this.editor.getSelection().getRange();
       
        range.deleteContents();
        var frag = range.createContextualFragment(pastedHTML);
        range.insertNode(frag);

 

[Rumen]

Hi Aleksandra,

I examined the http://fdsrv.fire-defence.com/editordemo.aspx page and found that the editor in it is rendered with div content area mode.

I am not sure what do you mean by the name Richtext editor, but if you are using the same editor (RadEditor for ASP.NET AJAX) as the one of the former link, you can turn its content area to DIV by setting ContentAreaMode="Div" and retest.

 

This jQuery code also does not use the RadEditor's API to catch the pasted content 

 $(this.editor.get_document()).on("paste", $.proxy(this.handlePaste, this));

and my advice is to not use it but use the OnClientPasteHtml event to capture the content.

 

Regards,
Rumen
Progress Telerik