Completed
Last Updated: 07 Jun 2016 11:10 by ADMIN
ADMIN
Ianko
Created on: 21 Mar 2014 11:23
Category: UI for ASP.NET AJAX
Type: Feature Request
0
ADD: A possibility to use a Shift+Tab keyboard shortcut that behaves just like in MS Word
Due to accessibility matters this shortcut currently focuses the last tool in the toolbar.

It would be great if developers could be available to modify the default behavior and attach a special command that behaves more like the MS Word's Shift+Tab command. The following behavior is the one experienced in desktop rich text editors:

    1. In text - The command adds a simple TAB (e.g. four white spaces).
    2. In list - The selected list item is being outdented.
    3. In table - The cursor moves to the previous cell.

A customization that provides such behavior can be easily implemented using a custom command and the addShortCut method:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
    <Content>
        Text<br/>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ol>
        <br/>
        <table>
            <tr>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <tr>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
        </table>    
    </Content>
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        var shortcutManager = editor.get_shortCutManager();

        if (shortcutManager.findShortCutByName("InsertTabMozilla")) {
            shortcutManager.removeShortCut("InsertTabMozilla");
            editor.addShortCut("InsertTab", "TAB");
        }

        editor.addShortCut("ShiftTabCommand", "Shift+TAB");
        editor.addShortCut("Underline", "Cmd+U");
    }

    Telerik.Web.UI.Editor.CommandList["ShiftTabCommand"] = function (commandName, editor, args) {
        var selectedElement = editor.getSelectedElement();
        var nodeName = selectedElement.nodeName;
        if (nodeName === "LI") {
            editor.fire("Outdent");
        } else if (nodeName === "TD") {
            Telerik.Web.UI.Editor.Utils.MoveToPreviousCell(selectedElement, editor);
        } else {
            editor.fire("InsertTab");
        }
    };
</script>
0 comments