ContentAreaMode Iframe keyboard shortcuts

2 posts, 0 answers
  1. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 21 Aug 2014 Link to this post

    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

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 26 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top