Inconsistency between IE & Chrome while pasting a link

[Akhil]

Hello Team,

Whenever we copy an intranet link (tenmaid) for IE - it is able to convert that to a hyperlink properly but the same doesn't work for Chrome. But however, in Chrome it works for an external link

We simply copied the link using Ctrl + C & pasted it onto the editor as Ctrl + V

Telerik-> RadEditor - > HTML View on IE, <a> tags are displayed on TenMAID link and external link.

Take a look at IE screenshot

Telerik-> RadEditor - > HTML View on Chrome, <a> tags are not displayed on TenMAID link but <a> tags are shown on external link.

Take a look at Chrome screenshot

As the hyperlinking works fine for IE; it does identify it as a link - can we please figure out why this doesn't work for Chrome?

Link - https://tenmaid.tenuk.com/VendorJob/Job.aspx?tab=1&JobID=7556080

[Rumen]

Hi Akhil,

The link (URL) autocompletion feature is offered by the rich text editing engine of Internet Explorer only. That's why you observe the reported behavior in IE, but not in Chrome.

What you can do is to attach to the OnClientPasteHtml event of RadEditor, check for the Paste command, examine the pasted content in the args.get_value() method and if there is a URL related text like http, https or www. to replace it with a <a> tag and insert the modified content in RadEditor content area via the args.set_value() method.

<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
    var commandName = args.get_commandName();
    var value = args.get_value();
    
    if (commandName == "Paste")
    {
      //modify here the string stored in the value variable if it contains a URL related text
       value = valur.replace("www.telerik.com", "<a href='www.telerik.com'>www.telerik.com</a>");
        args.set_value(value);  //set the modified pasted content in the editor
    }
}
</script>

Regards,
Rumen
Progress Telerik

[siva]

Thanks Akhil for your initial post.

@Rumen ,

Solution code is already exist on .ascx control page.

function OnClientPasteHtml(editor, args) {
        if (args.get_commandName() == "Paste" || args.get_commandName() == "") {
            var value = args.get_value();
             if (isBase64Image(value) || isImageUrl(value)) {
                args.set_value("<img src='"+value+"'/>");
            }
            else if (isUrlValid(value)) {
                if (value.indexOf(":") > 0 && value.indexOf("//") > 0)
                    args.set_value("<a target='_blank' href='" + value + "'>" + value + "</a>");
                else
                    args.set_value("<a target='_blank' href='http://" + value + "'>" + value + "</a>");
                        
            } 
        }
    }

Function calling place code is mentioned below

   <telerik:RadEditor ID="NotesArea" runat="server" SpellCheckSettings-AllowAddCustom="false"
                                    imagespaths="~/Photos" textmode="MultiLine" rows="7" EnableViewState="false" columns="80"
                                    Width="731px" Height="203px" Skin="Default" EnableEmbeddedSkins="True" enableenhancededit="false"
                                    ToolsFile="~/TelerikControls/Config/ToolsFile.xml" OnClientSubmit="TelericOnClientSubmit" OnClientPasteHtml="OnClientPasteHtml"
                                    OnClientCommandExecuting="changeImageManager" OnClientCommandExecuted="OnClientCommandExecutedURL" StripFormattingOptions="All" OnClientLoad="OnClientLoad" ContentFilters="None">
                                    <CssFiles>
                                        <telerik:EditorCssFile Value="~/TelerikControls/Css/EditorContentArea.css" />
                                    </CssFiles>

Akhil is already mentioned that It's working on IE and still not working on Chrome.

Thanks,

Siva

 

 

 

 

[Rumen]

Hi Siva,

My advice is to place a debugger and examine what is happening inside the isUrlValid if block since the isUrlValid is your own function:

if (isUrlValid(value)) {
    if (value.indexOf(":") > 0 && value.indexOf("//") > 0)
        args.set_value("<a target='_blank' href='" + value + "'>" + value + "</a>");
    else
        args.set_value("<a target='_blank' href='http://" + value + "'>" + value + "</a>");
}

 

For your convenience, I recorded a short video https://screencast-o-matic.com/watch/crV2jaPPou demonstrating my test with an isUrlValid function taken from this StackOverflow discussion  - JS Regex url validation.

        <script type="text/javascript">
            function OnClientPasteHtml(editor, args) {
                if (args.get_commandName() == "Paste" || args.get_commandName() == "") {

                    debugger

                    var value = args.get_value();
                   // if (isBase64Image(value) || isImageUrl(value)) {
                   //     args.set_value("<img src='" + value + "'/>");
                   // }
                   // else
                    if (isUrlValid(value)) {
                        if (value.indexOf(":") > 0 && value.indexOf("//") > 0)
                            args.set_value("<a target='_blank' href='" + value + "'>" + value + "</a>");
                        else
                            args.set_value("<a target='_blank' href='http://" + value + "'>" + value + "</a>");

                    }
                }
            }

            function isUrlValid(userInput) {
                var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
                if (res == null)
                    return false;
                else
                    return true;
            }
        </script>
        <telerik:RadEditor ID="NotesArea" runat="server" SpellCheckSettings-AllowAddCustom="false"
            imagespaths="~/Photos" textmode="MultiLine" rows="7" EnableViewState="false" columns="80"
            Width="731px" _Height="203px" Skin="Default" EnableEmbeddedSkins="True" enableenhancededit="false"
            _ToolsFile="~/TelerikControls/Config/ToolsFile.xml" _OnClientSubmit="TelericOnClientSubmit" OnClientPasteHtml="OnClientPasteHtml"
            _OnClientCommandExecuting="changeImageManager" _OnClientCommandExecuted="OnClientCommandExecutedURL" StripFormattingOptions="All" _OnClientLoad="OnClientLoad" ContentFilters="None">
            <CssFiles>
                <telerik:EditorCssFile Value="~/TelerikControls/Css/EditorContentArea.css" />
            </CssFiles>
        </telerik:RadEditor>

Use this approach to examine what comes from the clipboard and how it is handled in your code. 

Regards,
Rumen
Progress Telerik

[siva]

Hi Rumen,

Thanks for your response.  Hyperlink issue has been sorted out, which is based on your approach.  isUrlValid function was not returning properly.   I have modified now.

[Rumen]

You are welcome, Siva! Thank you for sharing what solved the problem on your end with the community!

 

Regards,
Rumen
Progress Telerik

[siva]

I would like to clarity one more item.  This is also Telerik-> RadEditor behavior in IE and Chrome. 

NHunSpellCheckProvider has been used in RadSpell.

We have an option to correct individual word spelling by right click particular word in IE. 

We don't have an option to correct individual word spelling by right click particular work in chrome browser.   

Right click option brings (Insert Row Above, Insert Row Below, Delete Row, table properties) option.   Looks like in chrome browser, it's overriding spelling correction.     Could you please help on this issue?

I have attached IE and Chrome - Spell check individual word - right click scenario screen shots.   

it's working on IE.  Chrome, it doesn't work. 

 

 

[siva]

 

 

Please ignore my previous message, it's having typo error.

I would like to clarify one more item.  This is also Telerik-> RadEditor behavior in IE and Chrome. 

NHunSpellCheckProvider has been used in RadSpell.

We have an option to correct individual word spelling by right click particular word in IE. 

We don't have an option to correct individual word spelling by right click particular word in chrome browser.   

Right click option brings (Insert Row Above, Insert Row Below, Delete Row, table properties) option.   Looks like in chrome browser, it's overriding spelling correction.     Could you please help on this issue?

I have attached IE and Chrome - Spell check individual word - right click scenario screen shots.   

it's working on IE.  Chrome, it doesn't work. 

[Rumen]

It is actually the default browser context menu that offers the spelling suggestions. 

If you want to enable the default browser's content menu and disable the built-in context menus of RadEditor, you can do that using the following JavaScript code:

 

<script type="text/javascript">
function OnClientLoad(editor) {
  editor.get_toolAdapter().enableContextMenus(false);
}
</script>
<telerik:RadEditor ID="RadEditor" OnClientLoad="OnClientLoad" runat="server"/>

 

Regards,
Rumen
Progress Telerik

[siva]

Thanks Ruman.   your approach is working on Chrome.

[siva]

Hi Rumen,

I am having issue of cursor is jumping into first line after enter key of the line in RadEditor tool.

In my scenario,  three lines

Dear Member, 
https://www.bbc.com/news/uk, test is in progress
it's ongoing process

after enter key of second line (https://www.bbc.com/news/uk, test is in progress)  the cursor is moved to beginning of (Dear Member)

same thing is happening each line after enter key.

I have attached the screen shot for your reference.   you can see cursor is before Dear Member, line.

    

[Rumen]

Hi Siva,

This is an old problem which should be fixed in the latest version.

Can you please test the Overview demo of RadEditor and if the problem does not occur upgrade to the latest version 2021.1.119? You can find upgrade instruction at Upgrade to a Newer Version of Telerik® UI for ASP.NET AJAX.

If the problem still persists in the demo, please provide step by steps instructions on how to replicate it in it.

Best Regards,
Rumen
Progress Telerik