Comment utiliser les raccourcis clavier personnalisés dans CKeditor avec jQuery?

J’ai remplacé la zone de texte utilisée par mes utilisateurs pour modifier le contenu avec CKeditor. Avant cette modification, les utilisateurs étaient habitués à enregistrer leur texte en appuyant sur Ctrl + S. Cela se fait via le plugin jQuery Hotkeys.

Comme CKeditor place son éditeur de texte dans une iframe, le raccourci ne fonctionne pas lors de la modification de texte.

J’espère que quelqu’un pourra m’aider à trouver une solution.

Après une matinée à me débattre, j’ai enfin trouvé le moyen de le faire!

CKeditor offre déjà une fonctionnalité de raccourci clavier (voir la documentation de CKeditor ). En utilisant cette fonctionnalité, nous pouvons relier les frappes de touches aux actions de CKeditor. Afin de sauvegarder, la ligne suivante devrait être ajoutée:

[ CKEDITOR.CTRL + 83 /*S*/, 'save' ],

Cependant , cela déclenchera la commande de sauvegarde CKeditor par défaut. Dans mon cas, j’ai besoin d’exécuter une fonction JS qui envoie les données de CKeditor avec d’autres éléments via AJAX au serveur et laisse l’utilisateur dans le même formulaire (ne quitte pas).

Après avoir consulté les forums d’assistance de CKeditor et après avoir codé , je suis arrivé à la solution suivante (j’utilise jQuery):

 var isCtrl = false; $('#your_textarea_id').ckeditor(function () { editor.on( 'contentDom', function( evt ) { editor.document.on( 'keyup', function(event) { if(event.data.$.keyCode == 17) isCtrl=false; }); editor.document.on( 'keydown', function(event) { if(event.data.$.keyCode == 17) isCtrl=true; if(event.data.$.keyCode == 83 && isCtrl == true) { //The preventDefault() call prevents the browser's save popup to appear. //The try statement fixes a weird IE error. try { event.data.$.preventDefault(); } catch(err) {} //Call to your save function return false; } }); }, editor.element.$); });

Testé sous Firefox, Chrome et IE8.

Il est possible d’append des commandes personnalisées à l’éditeur et d’associer ces commandes à une frappe au clavier. Voici un exemple (utilisant l’adaptateur jQuery)

 $(function() { // Create editor $('#textbox').ckeditor(function() { // Once the editor is loaded, we can add custom commands /** Alt + A will alert a greeting message **/ // First, we define our custom command this.addCommand('myGreetingCommand', { exec : function(editor, data) { alert("Hello world!"); } }); // Then, we set up the key combination this.keystrokeHandler.keystrokes[CKEDITOR.ALT + 65 /* A */] = 'myGreetingCommand'; /** Ctrl + B will alert a good bye message **/ this.addCommand('myGoodByeCommand', { exec : function(editor, data) { alert("Goodbye!"); } }); this.keystrokeHandler.keystrokes[CKEDITOR.CTRL + 66 /* B */] = 'myGoodByeCommand'; }); });