v4 キーボードショートカットのカスタマイズ

CKEditorはキーボードショートカットも簡単に変更できます。

config設定

config.jsで以下のようにします。

CKEDITOR.editorConfig = function( config ) {

	config.keystrokes = [
		[CKEDITOR.CTRL + 75, 'undo'], // Ctrl+K
	];

}

標準設定ではCtrl + Kにはハイパーリンクダイアログが設定されていますが、試しに「undo」にカスタマイズしてみました。

前回作成した自作コマンドなんかもコマンド名を設定するだけで使えるようになります。

setKeystroke()

editor.setKeystroke( CKEDITOR.CTRL + 73, 'image') // Ctrl + I

editorのsetKeystrokeメソッドで設定することもできます。プラグインの中で設定したり動的に設定することもできます。

見出しの設定

見出しの設定は少しだけ手間がかかります。

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.setKeystroke( CKEDITOR.CTRL + 48 /* 0 */, 'p');
editor.setKeystroke( CKEDITOR.CTRL + 49 /* 1 */, 'h1');
editor.setKeystroke( CKEDITOR.CTRL + 50 /* 2 */, 'h2');
editor.setKeystroke( CKEDITOR.CTRL + 51 /* 3 */, 'h3');
editor.setKeystroke( CKEDITOR.CTRL + 52 /* 4 */, 'h4');
editor.setKeystroke( CKEDITOR.CTRL + 53 /* 5 */, 'h5');