CKEditor direct formatting keyboad shortcuts

Last modified by Beat Burgener on 2021/03/18 11:28

page_white_code_redAssign keyboard shortcuts to direct formatting in CKEditor like heading 1-6, number/bullet list, preformatted, paragraph
Type
Category
Developed by

Beat Burgener

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Description

 

This is a CKEditor Plugin!

Prerequisites & Installation Instructions do NOT apply! Read installation instructions below:

It goes into a folder where you have your CKEditor plugins. I named it "customkeyboardshortcuts" but you can give it a name of your own.

The code goes into a file named "plugin.js" in this folder. You then need to hint xWiki to use it in CKEditor:

https://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor%20Integration/#HUseadditionalCKEditorplugins

As of the keys assigned, you can modify it to your needs too... for now, the following keys are defined:

Keyboard shortcutFormattingRemarks
Control + 0ParagraphSet the format of the current paragraph to "normal"
Control + 1 - 6Heading 1 - 6Set the format of the current paragraph to heading and the number typed
Control + 7PreformattedSet the format of the current paragraph to preformatted (monospace)
Control + 8BlockquoteToggles the Blockquote format
Control + Shift + BBilleted listToggles bulleted list
Control + Shift + NNumbered listToggles numbered list

Contents of "plugin.js"

/**
 * @license [email protected], version 0.0.1, provided as is
 */


/**
 * @fileOverview customkeyboardshortcuts Plugin
 */


CKEDITOR.plugins.add( 'customkeyboardshortcuts', {

  init: function( editor ) {

  editor.addCommand( 'p' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'p' } )) );
  editor.addCommand( 'h1' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h1' } )) );
  editor.addCommand( 'h2' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h2' } )) );
  editor.addCommand( 'h3' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h3' } )) );
  editor.addCommand( 'h4' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h4' } )) );
  editor.addCommand( 'h5' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h5' } )) );
  editor.addCommand( 'h6' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h6' } )) );
  editor.addCommand( 'pre' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'pre' } )) );
 
 
  /* Ctrl + 0 */   editor.setKeystroke( CKEDITOR.CTRL + 48, 'p');
  /* Ctrl + 1 */   editor.setKeystroke( CKEDITOR.CTRL + 49, 'h1');
  /* Ctrl + 2 */   editor.setKeystroke( CKEDITOR.CTRL + 50, 'h2');
  /* Ctrl + 3 */   editor.setKeystroke( CKEDITOR.CTRL + 51, 'h3');
  /* Ctrl + 4 */   editor.setKeystroke( CKEDITOR.CTRL + 52, 'h4');
  /* Ctrl + 5 */   editor.setKeystroke( CKEDITOR.CTRL + 53, 'h5');
  /* Ctrl + 6 */   editor.setKeystroke( CKEDITOR.CTRL + 54, 'h6');
  /* Ctrl + 7 */   editor.setKeystroke( CKEDITOR.CTRL + 55, 'pre');
  /* Ctrl + 8 */   editor.setKeystroke( CKEDITOR.CTRL + 56, 'blockquote' );
  /* Ctrl + Shift + N */ editor.setKeystroke( CKEDITOR.SHIFT + CKEDITOR.CTRL + 78, 'numberedlist');
  /* Ctrl + Shift + B */ editor.setKeystroke( CKEDITOR.SHIFT + CKEDITOR.CTRL + 66, 'bulletedlist');
    }
});

Tags:
     

Get Connected