我如何在 TinyMCE v4 中实现 tinymce.Shortcuts

Question

我想为我的 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，但我无法理解它。

Answer 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初始化参数！

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

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

我如何在 TinyMCE v4 中实现 tinymce.Shortcuts

How do I implement tinymce.Shortcuts in TinyMCE v4

tinymce

keyboard-shortcuts

tinymce-4