如何在 TinyMCE v4 中实现 tinymce.Shortcuts答案

【问题标题】：How do I implement tinymce.Shortcuts in TinyMCE v4如何在 TinyMCE v4 中实现 tinymce.Shortcuts
【发布时间】：2017-03-21 01:16:43
【问题描述】：

我想在我的 TinyMCE 编辑器中添加键盘快捷键。

这是我的初始化代码：

tinymce.init({
    selector: 'textarea',
    menubar: false,
    mode : "exact",
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code',
    'print'
    ],
    toolbar: 'print | styleselect | bullist numlist',
});

我知道我需要一些类似的东西：

editor.shortcuts.add('ctrl+a', function() {});

但我不明白如何将快捷方式代码与我的初始化代码连接起来。

TinyMCE 文档here，但我无法理解它。

【问题讨论】：

标签： tinymce keyboard-shortcuts tinymce-4

【解决方案1】：

这是怎么做的：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML

  // add your shortcuts here
  setup: function(editor) {
    editor.shortcuts.add('ctrl+a', function() {});
  }
});

使用setup init 参数！

【讨论】：

关于这个答案的问题。为了让这对我有用，我还必须添加一个描述函数的字符串。所以不工作：editor.shortcuts.add('ctrl+a', function() {}); 工作：editor.shortcuts.add('ctrl+a', myCommandDescription, function() {}); 在尝试了我在 TinyMCE 存档文档here 中找到的不推荐使用的代码后，我得出了这个结论。您是否能够在不添加该描述字符串的情况下使关键命令起作用？
没有，因为add函数是tinymce核心函数，但是可以使用空字符串
感谢您的帮助@Thariama。你让我朝着正确的方向前进。我真的很感激。

【解决方案2】：

这是@Thariama 提供的答案的扩展。对我有用的代码是：

tinymce.init({
    selector: 'textarea',
    menubar: false,
    mode : "exact",
    setup: function(editor) {
        editor.shortcuts.add('ctrl+a', desc, function() { //desc can be any string, it is just for you to describe your code.
            // your code here
        });
    },
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code',
    'print'
    ],
    toolbar: 'print | styleselect | bullist numlist',
});

或者，您也可以使用以下命令，这将允许您覆盖 TinyMCE 保留的关键命令：

tinymce.init({
    selector: 'textarea',
    menubar: false,
    mode : "exact",
    setup: function(e) {
      e.on("keyup", function(e) {
        if ( e.keyCode === 27 ) {  // keyCode 27 is for the ESC key, just an example, use any key code you like
          // your code here
        }
      });
    },
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code',
    'print',
    ],
    toolbar: 'print | styleselect | bullist numlist',
});

【讨论】：

【解决方案3】：

作为对前两个答案的补充，这里有一个完整的例子：

tinymce.init({
//here you can have selector, menubar...
setup: function (editor) {
       setLocale(editor);
            // For the keycode (eg. 13 = enter) use: cf http://keycode.info 
            editor.shortcuts.add('ctrl+13', 'indent', function(){      
                tinymce.activeEditor.execCommand('indent');
            });

            editor.shortcuts.add('ctrl+f', 'subscript ', function(){      
                tinymce.activeEditor.execCommand('subscript');
            });
        },
        });

【讨论】：