在 Tinymce 中覆盖快捷方式分配答案

【问题标题】：Overriding shortcut assignments in Tinymce在 Tinymce 中覆盖快捷方式分配
【发布时间】：2013-11-05 14:47:28
【问题描述】：

我在一个显示 html 文档并允许用户对其进行注释的应用程序中使用 Tinymce。

我已经创建了许多插件并附上了我自己的快捷方式。我还通过注释掉 tinymce javascript 中的分配并创建自己的来创建自己的粗体、斜体和下划线处理程序。

但是有一些我似乎无法使用的快捷方式。

我正在使用 addShortcut 调用。例如，无论我如何尝试覆盖它，CTRL-O 都会打开一个标准的文件打开窗口。我可以分配 CTRL-SHIFT-O 并且效果很好。

我还希望能够覆盖浏览器使用的快捷方式的默认行为，例如 CTRL-R 进行刷新。我们的主要用户非常喜欢使用键盘快捷键，并且担心他会意外按下 CTRL-R，这可能会刷新页面并丢失未保存的工作。

有没有办法在 CTRL-R 到达浏览器之前覆盖或拦截它？

提前感谢您的帮助。

【问题讨论】：

标签： javascript tinymce keyboard-shortcuts tinymce-4

【解决方案1】：

实际上，我从 StackOverflow 上的另一篇文章中找到了解决此问题的方法，该方法使我可以完全控制所有击键并轻松捕获所需的任何快捷方式。这成功地覆盖了用于刷新的 CTRL-R 和用于打开的 CTRL-O。我对示例代码做了一些修改，但非常感谢 hiss056 的解决方案。他的回答以及其他一些有用的例子可以在以下位置找到：

Overriding Browser's Keyboard Shortcuts

以下是我的代码版本：

tinymce.init({
    selector: "textarea#elm1",
    theme: "modern",
    statusbar: false,
    width: "100%",
    height: "95%",
    plugins: ["print preview"],
    content_css: "css/content.css",

    ...

    setup: function(ed)
    {
        ed.on("keyup", function(e) {
        console.debug('Key up event: ' + e.keyCode);
            overrideKeyboardEvent(e);
        });

        ed.on("keydown", function( e) {
            console.debug('Key down event: ' + e.keyCode);
            overrideKeyboardEvent(e);
    });

<script type="text/javascript">

document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};

function overrideKeyboardEvent(e){
  var returnVal = true; 

  switch(e.type){
    case "keydown":
      if(!keyIsDown[e.keyCode]){
        keyIsDown[e.keyCode] = true;
        // check if they selected ctrl-r which will refresh the screen
        if (keyIsDown[17])
        {
            switch (e.keyCode)
            {
            case 82:    // CTRL-R refreshes the screen!  Don't want to do that!
                 e.stopPropagation();
                 e.preventDefault();
                 returnVal = false; // false means don't propagate
                break;
            case 79:    // CTRL-O by default opens an open File Dialog.  
                 e.stopPropagation();
                 e.preventDefault();
                 returnVal = false; // false means don't propagate

                 // call openDocument
                 loadDocument(false);
                 break;
            case 68:    // CTRL-D by default opens up the Bookmark Editor in Chrome.  We want to start a comment!
                 e.stopPropagation();
                 e.preventDefault();    
             returnVal = false; // false means don't propagate  
             createComment();
             break;
        }

        }       
    }
    break;
    case "keyup":
       delete(keyIsDown[e.keyCode]);
       // do key up stuff here
       break;
    }

  return returnVal;
}

欢迎其他建议、改进、cmets 等。

问候，

罗伯

【讨论】：