Edit this page

Tab Key Behavior

This help article describes the default behavior of the tab key in RadEditor and explains how to control it and obtain consistent behavior between browsers.

The Tab key behaves differently among different browsers in RadEditor (Table 1). This is so because the tabbing functionality relies on the browsers' internal commands by default.

Table 1: RadEditor tab key behavior in different browsers according to the cursor position.

Browser Table List Div/Span/P
FireFox Table cell navigation HTML elements navigation HTML elements navigation
Chrome Table cell navigation Inserts white-spaces within a span element Inserts white-spaces within a span element
IE Table cell navigation Indents list element Inserts four   elements

You can select the behavior of IE browser and apply it to the rest (Example 1).

Example 1: Make the RadEditor tab key behavior from IE (Table 1) apply to all browsers.

function OnClientLoad(editor, args) {
    var shortcutManager = editor.get_shortCutManager();
    if (shortcutManager.findShortCutByName("InsertTabMozilla")) {
        shortcutManager.removeShortCut("InsertTabMozilla");
        editor.addShortCut("InsertTab", "TAB");
    }
}
<telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
    <Content>
        <p>some paragraph</p>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </Content>
</telerik:RadEditor>

See Also