RadEditor Tab Key focus on another control in firefox while in IE it inserts whitespace

[batusai]

good day,

how can i insert white space when the user press the tab key on firefox browser, this is ok in IE,

tnx

[Rumen]

Hi Batusai,

Here is an example how to achieve your scenario:

<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server"></telerik:RadEditor>
script type="text/javascript">
function OnClientLoad(editor, args)
{
   //attach to the onkeydown event, check whether the tab key is pressed and paste &nbsp; in the editor
   editor.attachEventHandler("onkeydown", function(e)
   {
       if(e.keyCode == '9')
       {
            editor.pasteHtml("&nbsp;&nbsp;&nbsp;&nbsp;");
            if (!document.all)
            {
                e.preventDefault();
                e.preventBubble();
                e.stopPropagation();
             
            }
            else
            {
                e.returnValue = false;
                e.cancelBubble = true;
            }  
       }
   });
}
</script>

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Darcy]

Is it possible to have the opposite behavior. That is, in IE, when you hit the tab key it moves focus to the next field on the page.

[Tervel]

Hi Darcy,

Yes, you can achieve this fairly easily in the following manner:

function OnClientLoad(editor, args)
{
     editor.removeShortCut("InsertTab");
}


Best regards,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Lakshman]

Rumen,

editor.removeShortCut("InsertTab");

This fixes this issue on IE.  In other words, tab key sets the focus on the next element on the form.

But on Mac Safari, the tab key still adds white spaces. Can you please give us a workaround to get this fixed on Safari?

Thanks, Lakshman

[Rumen]

Hi Lakshman,

I was able to set the focus on the next element placed after RadEditor by using the following approach:

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

<script type="text/javascript">

function OnClientLoad(editor, args)

{

//attach to the onkeydown event, check whether the tab key is pressed and paste &nbsp; in the editor

editor.attachEventHandler("onkeydown", function(e)

{

editor.removeShortCut("InsertTab");

if(e.keyCode == '9')

{

if ($telerik.isSafari)

{

$get("Button1").focus();

e.preventDefault();

e.preventBubble();

e.stopPropagation();

}

}

});

}

</script>

<asp:Button ID="Button1" runat="server" Text="Button" />

Best wishes,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[James]

This does not work on my application which is built on top of ASP.NET MVC/.NET 3.5SP1.

I added the code, 

function OnClientLoad(editor, args)
{
editor.removeShortCut("InsertTab"); 
}

and now the tab -key will move the cursor to the start point of the text in radeditor, it won't go to next control.

Any idea?

thanks

[Rumen]

Hi James,

Please, open a support ticket and send a sample fully working project, which demonstrates the problem along with step-by-step instructions on how to reproduce it. Please, specify the used browser as well.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James]

I figured it out and I think it might be a bug or at least an issue. It is very easy to reproduce.

That is if the code disabled tab key and also enabled AccessKey for the same radEditor control, the tab will go to the accesskey and then jump back to the radEditor. I reproduced it in IE and FF.

Steps to reproduce this:

1. Create a sample project and put access key and disable InsertTab on the radEditor

2. Run it in FF, you can use Developer toolbar see the Tab index of the access key is AFTER the radEditor textArea. (this causes the problem).

Now I have to disable access key if disabled insertTab.

Hope this helpful.

Thanks

James

[Rumen]

Hi James,

The accesskey is applied to a hidden input element and once it is fired by the keyboard shortcut the focus is set programmatically to the editor's content area. Unfortunately, this implementation is not compatible with the disabled InsertTab feature.

What you can do is to put a hidden with style="position: absolute;left:-10000px;" DIV element  above the editor and append the input element in it as it is shown below:

<div id="test" style="position: absolute;left:-10000px;"></div>
<telerik:RadEditor AccessKey="E" ID="RadEditor1" OnClientLoad="OnClientLoad" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.removeShortCut("InsertTab");
        setTimeout(function() {
            var div = $get("test");

            var accesskeyDiv = $get("ctl00_MainContent_RadEditor1EditorAccessKey");
            div.appendChild(accesskeyDiv);
        }, 10);

    }
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />

This fixed the problem on my end.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Noemi]

Hello!

I'm trying to do this:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="RadEditor.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<script type="text/javascript">
function OnClientLoad(editor, args)
{
       editor.RemoveShortCut("InsertTab");
}
</script>
<script type="text/javascript">
function OnClientCommandExecuted(editor, args)
{
   alert ("Executed command was " + args.toString());
}
</script>
<body>
    <form id="form1" runat="server">
    <div>
    <rad:RadEditor ID="txtTexto" runat="server" Width="275" Height="75" BorderStyle="None"
                                            Skin="Office2000" EnableHtmlIndentation="false" ConvertToXhtml="false" ShowHtmlMode="false"
                                            ToolbarMode="Default" EnableDocking="false" SpellDictionaryLanguage="es-ES" EnableTheming="True"
                                            RenderAsTextArea="False" OnClientCommandExecuted="OnClientCommandExecuted" ShowPreviewMode="false"
                                            ShowSubmitCancelButtons="false" StripFormattingOnPaste="NoneSupressCleanMessage" OnClientLoad="OnClientLoad">
                                        </rad:RadEditor>
                                         <rad:RadEditor ID="RadEditor1" runat="server" Width="275" Height="75" BorderStyle="None"
                                            Skin="Office2000" EnableHtmlIndentation="false" ConvertToXhtml="false" ShowHtmlMode="false"
                                            ToolbarMode="Default" EnableDocking="false" SpellDictionaryLanguage="es-ES" EnableTheming="True"
                                            RenderAsTextArea="False" OnClientCommandExecuted="OnClientCommandExecuted" ShowPreviewMode="false"
                                            ShowSubmitCancelButtons="false" StripFormattingOnPaste="NoneSupressCleanMessage" OnClientLoad="OnClientLoad">
                                        </rad:RadEditor>
    </div>
    </form>
</body>
</html>

But, when I execute it show me this error message:

Exception while executing client event OnClientLoad Error: El objeto no acepta esta propiedad o método.

Could you help me??

Thanks a lot and sorry for my english.

[Rumen]

Hi Noemi,

The solution works for RadEditor for ASP.NET AJAX only. Since you use RadEditor Classic the only thing you need to do is to set the EnableTab property of RadEditor to false.

Kind regards,
Rumen
the Telerik team

[Noemi]

Thanks a lot, it works fine but, it's possible that it works in Chrome?

[Rumen]

Hi Noemi,

RadEditor Classic is released more that 2 years ago before the official appearance of Chrome and its EnableTab property does not support this browser. In this browser the Tab key is not handled by code and the Tab key command is controlled by the browser.

Kind regards,
Rumen
the Telerik team

[Roberto]

<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server"></telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor, args)
{
   //attach to the onkeydown event, check whether the tab key is pressed and paste   in the editor
   editor.attachEventHandler("onkeydown", function(e)
   {
       editor.removeShortCut("InsertTab");
       if(e.keyCode == '9')
       {
            if ($telerik.isSafari)
            {
                $get("Button1").focus();
                e.preventDefault();
                e.preventBubble();
                e.stopPropagation();



            }
       }
   });
}
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />

The code above work fine, but the behaviour with Safari is quite different from others browsers. I would like to have a way to skip from the content area just to design/HTML buttons, and then to the radio button list below.
Any Idea how to do it?
Or otherwise how to set the behaviour in IE /FF, so that it appears similar to Safari ?
Thanks
Rob

[Dobromir]

Hi Roberto,

You can set the focus to the Design Mode button using the standard DOM focus() method. The following sample code provides the same functionality in all browsers:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        editor.removeShortCut("InsertTab");

        editor.attachEventHandler("onkeydown", function (e)
        {
            if (e.keyCode == '9')
            {
                $telerik.cancelRawEvent(e); //cancel further execution of the event

                var designModeButton = $telerik.$(".reMode_design")[0]; //get reference to the design mode DOM element
                designModeButton.focus();//set focus the Design mode element
            }
        });
    }
</script>

I hope this helps.

Greetings,
Dobromir
the Telerik team