ContentAreaMode Iframe keyboard shortcuts

[hacker]

I'm working with the Q2 2014 version of the Editor and I'm using the shortcut attribute in the tools XML file to define various keyboard shortcuts.

I've changed some of the shortcut keys and the Editor is still responding to the default shortcuts.  For example, originally the shortcut for the Link Manager was CTRL+K.  I want it to be CTRL+L but it still responds to CTRL+K.

Secondly, since I'm using Iframe as the ContentAreaMode because of CSS Styling, I've found that unless the focus is on the Iframe, the keyboard shortcuts don't work at all.  How can I get it to work properly on the surrounding areas too?  This is important for functions like Save and other custom menu options (Page Properties, etc) along with items like the Image Manager or Document Manager.

Editor Code:

<telerik:RadEditor ID="reContent" runat="server" ExternalDialogsPath="~/RadEditorDialogs/" ToolsFile="tools.xml" ContentAreaMode="Iframe"
                ContentFilters="MakeUrlsAbsolute, DefaultFilters" EditModes="Design, Html" EnableAriaSupport="True" Skin="Metro" ToolbarMode="RibbonBar" OnClientLoad="onClientLoad" EnableViewState="False">
                <Content></Content>
                <ImageManager ViewPaths="/images" UploadPaths="/images" DeletePaths="/images" MaxUploadFileSize="2100000" ContentProviderTypeName="niagarafalls.DBContentProvider, niagarafalls"
                    SearchPatterns="*.gif, *.png, *.jpg, *.svg, *.svgz" ViewMode="Grid"
                    AllowMultipleSelection="True" EnableAsyncUpload="True" EnableImageEditor="False" EnableThumbnailLinking="False" />
            </telerik:RadEditor>

Tools.xml snippet:

<tools name="Page" tab="Home">
    <tool name="Save" shortcut="CTRL+S"/>
    <tool name="Page Properties" shortcut="CTRL+R"/>
    <tool name="New Page" shortcut="CTRL+N"/>
    <tool name="Open Page" shortcut="CTRL+O"/>
  </tools>
<tools name="Links" tab="Insert">
        <tool name="LinkManager" size="large" shortcut="CTRL+L"/>
        <tool name="Unlink" strip="LinksStrip" shortcut="CTRL+SHIFT+L"/>
        <tool name="DocumentManager" strip="LinksStrip"/>
        <tool name="ImageMapDialog" strip="LinksStrip"/>
        <tool name="InsertCustomLink" shortcut="CTRL+ALT+K"/>
    </tools>

Thanks,
Shawn

[Ianko]

Hello Shawn,

Thank you for contacting the Telerik support.

The encountered behavior is due to the enabled RibbonBar mode. When the RibbonBarMode is set to the ToolbarMode property, the shortcuts are initialized through the integrated RibbonBar. Therefore, it is recommended any changes regarding shortcuts to be done trough the client-side Shortcut Manager API, exposed by the RadEditor contort. 

The following example shows how to implement such behavior for the Link Manager:

<telerik:RadEditor runat="server" ID="RadEditor1"
    ToolsFile="ToolsFile.xml"
    ToolbarMode="RibbonBar"
    OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {

        changeShortcut(editor, "LinkManager", "Ctrl+L");
    }

    function changeShortcut(editor, commandName, newShortcut) {
        var shortcutManager = editor.get_shortCutManager(),
            shortcut = shortcutManager.findShortCutByName(commandName);

        shortcutManager.removeShortCut(commandName);
        shortcutManager.addShortCut(commandName, newShortcut);
    }
</script>

Using the keyboard shortcuts outside the RadEditor control is not an out-of-the-box solution. Such functionality should be implemented manually as per to the application requirements. Note that such behavior could break any native, already predefined shortcuts for the browser. You can find more details about implementing shortcuts in web environment in this material.

For example, this configuration will attach a Ctrl+S shortcut that trigers the editor's custom Save command:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>


<telerik:RadEditor runat="server" ID="RadEditor1"
    ToolsFile="ToolsFile.xml"
    ToolbarMode="RibbonBar"
    OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        changeShortcut(editor, "LinkManager", "Ctrl+L");
        changeShortcut(editor, "Save", "Ctrl+S");
    }

    function changeShortcut(editor, commandName, newShortcut) {
        var shortcutManager = editor.get_shortCutManager(),
            shortcut = shortcutManager.findShortCutByName(commandName);

        shortcutManager.removeShortCut(commandName);
        shortcutManager.addShortCut(commandName, newShortcut);
    }

    function pageLoad() {
        document.onkeyup = function (e) {
            if (e.which == 17) isCtrl = false;
        }

        document.onkeydown = function (e) {

            if (e.which == 17) isCtrl = true;
            if (e.which == 83 && isCtrl == true) {

                var editor = $find("<%= RadEditor1.ClientID %>");
                editor.fire("Save");
                return false;
            }
        }
    }
</script>

Regards,
Ianko
Telerik