Je souhaite capturer des événements de clavier dans l'éditeur tinymce en utilisant un script utilisateur (par exemple ajouter des raccourcis clavier)

Question

Je souhaite ajouter des raccourcis clavier au bouton de l'éditeur tinymce. Le problème est que je n'ai pas accès au code source du site. Donc, cela doit être fait en utilisant usercript (c'est-à-dire tampermonkey, greasemonkey).

J'ai réussi à créer un script qui a ajouté les raccourcis si j'exécute le script de la console disponible dans les outils de développement du navigateur, mais ce code ne fonctionne pas dans tampermonkey ou greasemonkey. Le script est la suivante:

function simulate(element, eventName) 
    { 
    var options = extend(defaultOptions, arguments[2] || {}); 
    var oEvent, eventType = null; 

    for (var name in eventMatchers) 
    { 
     if (eventMatchers[name].test(eventName)) { eventType = name; break; } 
    } 

    if (!eventType) 
     throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported'); 

    if (document.createEvent) 
    { 
     oEvent = document.createEvent(eventType); 
     if (eventType == 'HTMLEvents') 
     { 
      oEvent.initEvent(eventName, options.bubbles, options.cancelable); 
     } 
     else 
     { 
      oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView, 
      options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY, 
      options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element); 
     } 
     element.dispatchEvent(oEvent); 
    } 
    else 
    { 
     options.clientX = options.pointerX; 
     options.clientY = options.pointerY; 
     var evt = document.createEventObject(); 
     oEvent = extend(evt, options); 
     element.fireEvent('on' + eventName, oEvent); 
    } 
    return element; 
} 

function extend(destination, source) { 
    for (var property in source) 
     destination[property] = source[property]; 
    return destination; 
} 

var eventMatchers = { 
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/, 
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/ 
} 
var defaultOptions = { 
    pointerX: 0, 
    pointerY: 0, 
    button: 0, 
    ctrlKey: false, 
    altKey: false, 
    shiftKey: false, 
    metaKey: false, 
    bubbles: true, 
    cancelable: true 
} 

tinymce.activeEditor.on('keydown', function(e) { 
    var e = e || window.event; // for IE to cover IEs window object 
    if(e.altKey && e.which == 81) { //Alt + Q 
     //alert('Keyboard shortcut working!'); 
     simulate(document.evaluate('//div[@id="mceu_3"]/button', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue, "click"); 
     return false; 
    } 
}); 

Dans le code ci-dessus div[@id="mceu_3"]/button est la balise div qui contiennent le bouton pour être déclenché par la combinaison de touches.

Pourriez-vous s'il vous plaît fournir une solution, aussi je n'ai pas beaucoup de connaissances de l'éditeur tinymce, donc une explication simplifiée sera plus utile.

Merci d'avance.

Answer 1

Après avoir cherché un autre jour, j'ai enfin trouvé la solution à ma requête here.

tinymce.activeEditor.on('keyup', function(e) { 
     console.debug("keyup"); 
    });