CKEditor custom keyboard shortcuts à la another wiki software

Beat_Burgener · June 22, 2019, 12:28pm

Hello there

Working with another well known Wiki product on some customers sites, I appreciated the option to format wiki text with keyboard shortcuts (like Heading 1-6 …)

Given the nature of xWiki being open source and using well documented components like CKEditor, it was not a big effort to port this over.

So I created a CKEditor plugin that does more or less the same for my / our purposes.

Ctrl + 0 == Paragraph
Ctrl + 1 - 6 == Heading 1 - 6
Ctrl + 7 == Preformatted
Ctrl + 8 == Blockquote
Ctrl + Shift + B == Bullted list
Ctrl + Shift + N == Numbered list

Note: Ctrl is probably the special key for Mac users

Unfortunately, uploading a zip is not permitted.

You can download it here: customkeyboardshortcuts

As it is rather tiny, I simply post the contents of the plugin.js below (as the download link above is not guaranteed forever):

/**
 * @license bbu@netsuccess.ch, 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');
    }
});

If the xWiki Dev Team deems this useful, feel free to integrate into CKEditor default plugins. If not, xWiki users interested in this functionality would need to integrate this into xWiki manually as any other CKEditor extension:

If there are any issues with it … like on Mac, Linux or other Browsers, please let me know …

vmassol · June 22, 2019, 1:36pm

Hey, this is great, thanks for sharing. One option you have for sharing is to put it on https://snippets.xwiki.org/ which is meant to share xwiki scripts. Would be awesome to have it there for now. You could also open a jira issue (type: idea or improvement) to suggest adding it to xwiki standard. It seems like a good idea to me. Only issue I see is finding non-conflicting keyboard shortcuts.

Thanks again

Beat_Burgener · June 22, 2019, 3:51pm

Well, as this is more related to CKEditor (in fact a plugin to CKEditor), I did not deem it appropriate to put it there as those snippets are more macro code (Groovy and such).

I tried to add it there anyway, but:
Failed to save the page. Reason: An error occured while saving: Error number 3201 in 3: Exception while saving document snippets:Extension.CKEditor direct formatting keyboad shortcuts.WebHome

No fun if one cannot save the page on the snippets wiki …

Also, the " Prerequisites & Installation Instructions" will not match the way to implement it …

True, but the ones chosen are the same as another product already uses in production. Only conflict so far is the bulleted list, where in Firefox this would normally load the library … but for those that use the library often (not sure who would), would be able to re-map to their needs easily …

And, I’m open to twitch the default if there are replies indicating that this was poorly chosen initially, like for Mac or so … and again, everybody could do what they need easily … feedback anyway welcome to improve the initial code for other to jump on a working version …

vmassol · June 22, 2019, 4:11pm

If you could put the full stack trace that would help to debug the problem and fix xwiki.org. FTR I tried and it worked for me.

Yes really no fun… I’d like to fix this.

You’re correct for both cases. But there are only 3 options I see:

Option 1: Package your code as an XWiki extension that can be installed using the Extension Manager. This way it can be released on extensions.xwiki.org.
Option 2: Do not make it an extension and provide it as a snippet for people to try out. In this case snippets.xwiki.org is the place where it makes the most sense to me.
Option 3: You leave it in the forum. I was suggesting option 2 for you, so that your work can be shared with others since on the forum it’s going to be hidden from most users IMO.

Ok. No conflicts for Chrome, Safari and IE?

The reason I was asking is mostly because I worked with Clement on adding the show/hide hidden docs and enable/disable advanced user mode and we couldn’t find a single available shortcut key and we had to resort to using a js library that supports combo and map it to xxx + a and xxx + h. So I was curious to know if you had found some free shortcuts.

But, yes, I agree with you, we should choose options that works for best and make it easy for users to be able to change them if need be.

Thanks!

Beat_Burgener · June 22, 2019, 9:41pm

Newbie question: How do I get the full stack trace from the web front end?

I already closed that FF window, but I try again once I know how to debug this in depth …

Option 1:
Don’t know how to do that and the efforts required, but this sounds like a overkill to me and probably will conflict with the CKEditor extension

Option2:
Tried, failed … I’ll try again … but as said, it involves some administration anyway except if there is a way to inject a CKEditor plugin or it’s equivalent without copying the plugin in a folder on the server and hint xWiki to load it with CKEditor … don’t see how this could be done via a macro, but I’m just getting to know Macros in xWiki …

Option4:
Include it with the default CKEditor set of plugins of xWiki and extend the xWiki Admin UI to make it easier to enable/disable plugins.
As for now, including an CKEditor plugin is quite an effort and I have 9 additional plugins so far …not to mention updating … I’ll comment to How to increase active installs of XWiki? as soon as time permits …

Honestly, don’t know as I’m only using FF. Maybe someone interested using this plugin might give some feedback on that… on the other hand, this shortcuts are only enabled while CKEditor is running and not in general when displaying a xWiki page …

Beat_Burgener · June 23, 2019, 12:57pm

@vmassol
OK, the “source” field in the snippet form is not intended for the source of the macro/script. I already thought it is really small for this

This was causing the error while saving the page… So, what is “source” intended for? URL?

It now can be found here:
https://snippets.xwiki.org/xwiki/bin/view/Extension/CKEditor%20direct%20formatting%20keyboad%20shortcuts/