RadEditor scrolls to top after pasting the contents

411 Views Asked by At

I am using Telerik RadEditor.

The issue:

On pasting the content into the Telerik Radeditor, the editor is getting scrolled to top. So, I searched the internet and also Telerik forums, but no luck. Finally, I worked on the following code with fix.

Code for RadEditor Server-Side Control:

     <telerik:RadEditor 
                        ID="E" 
                        runat="server" 
                        Width="100%" 
                        AllowScripts="true" 
                        AllowPaging="true" 
                        EnableResize="false"
                        NewLineMode="P" 
                        OnClientLoad="OnClientLoad" 
                        OnClientModeChange="E_OnClientModeChanged" 
                        EditModes="Design,Html"
    StripFormattingOptions="Span,MsWordRemoveAll,CSS,Font,ConvertWordLists" 
                      OnClientPasteHtml="radEditorControl_OnClientPasteHtml" 
                      OnClientSelectionChange="OnClientSelectionChange">


</telerik:RadEditor>

Below is the Javascript Code with fix:

//Event on pasting the content into the RadEditor. Fixing the scrolling issue on pasting the content.

        var isPasted = false;

        function radEditorControl_OnClientPasteHtml(editor, args) {
            if (editor != undefined)
                isPasted = true;
        }

function OnClientSelectionChange(editor, args) {
            if (isPasted != undefined && isPasted == true && editor != undefined) {
                isPasted = false;
                editor.setFocus();
                var iframeElement = editor._contentAreaElement; // the DOM element for the iframe;

                if (iframeElement) {
                    //Get the iFrame cursor position.
                    var _focusNode = iframeElement.contentWindow.getSelection().focusNode;

                    if (_focusNode != undefined) {
                        //Focus node is not an element, get the previous element sibling
                        if (_focusNode.nodeType != 1) {
                            if (_focusNode.previousElementSibling != undefined)
                                _focusNode = _focusNode.previousElementSibling;
                            else
                                _focusNode = _focusNode.parentNode;
                        }

                        //Insert a div near focusNode(cursor) of the iFrame contentWindow.
                        var timeStamp = new Date().getUTCMilliseconds();
                        var _id = "scrollArea_" + timeStamp;

                        var focusElement = jQuery('<input type="text" id="' + _id + '" name="' + _id + '" onfocus="alert();" />').insertAfter(_focusNode)[0];

                        setTimeout(function () {
                            if (focusElement != undefined) {
                                focusElement.focus({ preventScroll: true });
                                focusElement.select();
                                var range = editor.getSelection().getRange(true); //returns an object that represents a restore point.
                                editor.getSelection().selectRange(range);
                                if (range != undefined && range.collapse !=undefined)
                                    range.collapse(true);

                                jQuery(focusElement).replaceWith("");
                            }
                        }, 50);
                    }
                }
            }
        }

The above code is working in IE and Chrome, but not in Firefox as focus() is not getting triggered for the input element which I am binding.

Please let me know if there is any other way for resolving the scroll issue on paste in RadEditor.

1

There are 1 best solutions below

0
Rumen Jekov On

I am aware of such a problem within the older versions of RadEditor. My advice is to try the latest version which you can test at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx. If the problem still persists please drop us a line in the Telerik AJAX forums or via the support ticketing system and we will look deeper into it.