我如何在TinyMCE v4中实现tinymce.Shortcuts [英] How do I implement tinymce.Shortcuts in TinyMCE v4

问题描述

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

I want to add keyboard shortcuts to my TinyMCE editor.

这是我的初始化代码:

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

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

I know that I need something along the lines of:

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

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

But I don't understand how to connect the shortcuts code with my init code.

TinyMCE文档此处，但是我在理解上有困难它.

TinyMCE documentation here, but I was having trouble understanding it.

推荐答案

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

This is an expansion of the answer @Thariama provided. Code that worked for me was:

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保留的键盘命令:

Alternatively you can also use the following, which will allow you to override key commands reserved by 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',
});

这篇关于我如何在TinyMCE v4中实现tinymce.Shortcuts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！