【问题标题】:Restrict keyboard shortcuts in TinyMCE editor在 TinyMCE 编辑器中限制键盘快捷键
【发布时间】:2011-01-03 07:06:14
【问题描述】:

试图找到在 TinyMCE 编辑器的 jQuery 版本中禁用单个键盘快捷键的位置。目前允许的快捷键列表是:

  • ctrl+z 撤销
  • ctrl+y 重做
  • ctrl+b粗体
  • ctrl+i 斜体
  • ctrl+u下划线
  • ctrl+1-6 h1-h6
  • ctrl+7 p
  • ctrl+8 div
  • ctrl+9 地址

目前希望禁用除撤消、重做和粗体之外的所有快捷方式。其余的在我们的实现中是不必要的,因为它是不需要的格式。

我似乎找不到启用这些快捷方式的代码。你能指出在哪里可以找到这个代码。

【问题讨论】:

    标签: jquery tinymce


    【解决方案1】:

    在 Firefox 中禁用测试

    这应该可以帮助您入门。您实际上可能需要为 ctrl+uctrl+i 添加空快捷方式以在其他浏览器中禁用它,但此代码已经过测试以禁用 Firefox 中的操作。在 tinyMCE 的初始化运行后运行(我在 Firebug 中测试了我的):

    for(var i in tinyMCE.editors){
      var editor = tinyMCE.editors[i];
      for(var s in editor.shortcuts){
        var shortcut = editor.shortcuts[s];
        // Remove all shortcuts except Bold (66), Redo (89), Undo (90)
        if(!(s == "ctrl,,,66" || s == "ctrl,,,89" || s == "ctrl,,,90")){
           // This completely removes the shortcuts
           delete editor.shortcuts[s];
    
           // You could use this instead, which just disables it, but still keeps
           // browser functionality (like CMD+U = show source in FF Mac) from interrupting the flow
           // shortcut.func = function(){  };
        }
      }
    }
    

    背景

    它似乎是围绕jscripts/tiny_mce/classes/Editor.js2294 行定义的(来自完整的开发下载)。

    此外,它们存储在Editor.shortcuts 变量中的数组中。他们的键是用特殊字符设置的,然后是键码,如下所示:ctrl,,,90

    但据我所知,似乎许多浏览器都实现了自己的 ctrl+bctrl+ictrl+u 版本,而只有 Gecko 浏览器没有:

    // Add default shortcuts for gecko
    if (isGecko) {
        t.addShortcut('ctrl+b', t.getLang('bold_desc'), 'Bold');
        t.addShortcut('ctrl+i', t.getLang('italic_desc'), 'Italic');
        t.addShortcut('ctrl+u', t.getLang('underline_desc'), 'Underline');
    }
    

    但如果你环顾四周,你会发现他们是如何启用它的。

    另外,查看Editor.addShortcut 方法。您也许可以覆盖默认行为。

    【讨论】:

    • 我更新了我的答案,包括一个关于如何禁用你不想要的快捷方式的示例。
    • 嗯,这个答案没有任何不足之处。 :) 撤回我的。 +1
    • @Pekka 好吧,谢谢 :) 起初我以为必须编辑源代码,但他们的快捷方式系统实际上很酷。
    • 这似乎在 Firefox 中运行良好,但在 Safari、Chrome 和 IE 中似乎不起作用。好像我无法覆盖浏览器默认值。有什么想法吗?
    • @RedWolves 都不行吗?或者只是 ctrl+i 和 ctrl+u 不工作,因为它们有浏览器实现?
    【解决方案2】:

    好的,所以我能够让它工作。我能够使用上面 Doug 的代码阻止 Firefox,让 IE 禁用密钥我希望我必须在 Doug 的代码块之后添加此代码。

    var $iframe = $('iframe').contents().get(0);
    
    $($iframe).keydown(function(oEvent) {
        //italics (ctrl+i & Cmd+i [Safari doesn't allow you to test for Cmd])
        if (oEvent.keyCode == '73' && (oEvent.metaKey || oEvent.ctrlKey)){
            oEvent.preventDefault();
            return false;
        }
    
        //underline (ctrl+u & cmd+u [Safari doesn't allow you to test for cmd])
        if (oEvent.keyCode == '85' && (oEvent.metaKey || oEvent.ctrlKey)){
            oEvent.preventDefault();
            return false;
        }
    });
    

    所以基本上 TinyMCE 将编辑器动态加载为 iFrame,因此我禁用了 iFrame 中的 Ctrl+uCtrl+i。我什么直到 iFrame 完成加载,然后附加一个 keydown 事件并嗅探 Ctrl+iCtrl+i (我也嗅探 Cmd+i kbd> 和 Cmd+u 用于 mac [虽然 Safari 不会让你根据这个 link 测试 cmd。其他所有东西都被禁用,我需要禁用。

    【讨论】:

      【解决方案3】:

      在 IE 和 FF 中允许 I B 和 U 来回切换的示例代码。

      var ctrlKey = false;
      
      function removeShortcuts(){
        var e = tinyMCE.activeEditor;
        for (var s in e.shortcuts){
          if(s=="ctrl,,,73" || s=="ctrl,,,85" || s="ctrl,,,66"){
            e.shortcuts[s].func = function(){};
          }
        }
        e.onKeyUp.add(onKeyUp);
        e.onKeyDown.add(onKeyDown);
      }
      
      function resetShortcuts(){
        var e = tinyMCE.activeEditor;
        if (isGecko) {
          e.addShortcut('ctrl+b', t.getLang('bold_desc'), 'Bold');
          e.addShortcut('ctrl+i', t.getLang('italic_desc'), 'Italic');
          e.addShortcut('ctrl+u', t.getLang('underline_desc'), 'Underline');
        }
        e.onKeyUp.remove(onKeyUp);
        e.onKeyDown.remove(onKeyDown);
      }
      
      
      function onKeyUp(editor, event){
        if(event.keyCode == 17){
          ctrlKey = false;
        }
      }
      
      function onKeyDown(editor, event){
        if(event.keyCode == 17){
          ctrlKey = true;
        }
        if(ctrlKey && (event.keyCode == 73 || event.keyCode == 85 || event.keyCode == 66){
          tinymce.dom.Event.cancel(event);
        }
      }
      

      【讨论】:

        【解决方案4】:

        即使这有一个公认的答案,我还是会分享我在 tinymce4 中使用的内容。您可以简单地将editor.addShortcut('ctrl+u', "", "") 添加到init 方法中的init 事件方法中,这将覆盖添加的快捷方式

        示例:

        tinyMCE.init({
            // Your options here
            setup: function(editor) {
                editor.on("init", function(){
                    editor.addShortcut("ctrl+u", "", "");
                });
            }
        })
        

        您可以在上面的代码中用ctrl+u 替换您想要禁用的任何快捷方式。

        【讨论】:

        • 我就是这样做的,但没有效果? ctrl+u 仍然下划线。
        • 我的 TinyMCE 版本是 4.7.9
        【解决方案5】:

        对于 TinyMCE v4:List of keyboard shortcuts available within the editor body

        tinyMCE.init({       
            setup: function(editor) {
                editor.on("init", function(){
                    editor.shortcuts.remove('meta+u', '', ''); // "meta" maps to Command on Mac and Ctrl on PC          
                });
            }
        })
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-07-02
          • 2010-12-31
          • 1970-01-01
          相关资源
          最近更新 更多