Pasted text get Triplicated in IE11 in Richtext editor

4 posts, 0 answers
  1. Aleksandra
    Aleksandra avatar
    2 posts
    Member since:
    Oct 2019

    Posted 30 Oct 2019 Link to this post

    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?

  2. Rumen
    Admin
    Rumen avatar
    14220 posts

    Posted 30 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Aleksandra
    Aleksandra avatar
    2 posts
    Member since:
    Oct 2019

    Posted 30 Oct 2019 Link to this post

    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);

     


  4. Rumen
    Admin
    Rumen avatar
    14220 posts

    Posted 30 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top