This is a migrated thread and some comments may be shown as answers.

ContentAreaMode Iframe keyboard shortcuts

1 Answer 28 Views
Editor
This is a migrated thread and some comments may be shown as answers.
hacker
Top achievements
Rank 1
hacker asked on 21 Aug 2014, 03:04 PM

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

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 26 Aug 2014, 11:50 AM
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.

 
Tags
Editor
Asked by
hacker
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or