如何在tinymce.Shortcuts中实现TinyMCE v4

Question

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

这是我的init代码：

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() {});

但我不知道如何将快捷键代码与我的init代码连接起来。

TinyMCE文档这里，但我很难理解它。

Answer 1

这是@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',
});

Answer 2

以下是如何做到这一点：

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

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

使用设置 init参数！

Answer 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');
            });
        },
        });