見出しのckeditorキーボードショートカットを有効にしますか？

Question

編集者が見出しを適用するためにキーボードショートカットを使用できるようにしたい。

私は、ckeditorサイトの"keystrokes" approachを実験しています。それはいくつかのものではなく、見出しでは機能します。例えば、以下はuがはCtrl +Shiftキー + を使用して '太字' の追加のマッピングを適用します。

config.keystrokes = [ 
    [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 85 /*U*/, 'bold' ], 
]; 

は、なぜ私が見出しを有効にすることはできませんか？私は（理想的にのみconfig.jsの内側）CKEditorバージョンのディレクトリに制限され、私の変更を保持するために望んでいる

CKEDITOR.editorConfig = function(config) { 
    // Define changes to default configuration here. 
    // For complete reference see: 
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config 

    // The toolbar groups arrangement, optimized for two toolbar rows. 
    config.toolbarGroups = [ 
     { name: 'styles', groups: [ 'styles' ] }, 
     { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, 
     { name: 'editing',  groups: [ 'find', 'selection', 'spellchecker' ] }, 
     { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
     { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
     { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
     { name: 'others' }, 
     { name: 'forms' }, 
     { name: 'tools' } 
    ]; 

    // Remove some buttons provided by the standard plugins, which are 
    // not needed in the Standard(s) toolbar. 
    config.removeButtons = 'Underline,Styles,Strike,Image,Outdent,Indent,Blockquote,Cut,Copy,Paste,PasteFromWord,Undo,Redo'; 

    // Set the most common block elements. 
    config.format_tags = 'p;h1;h2;h3;h4'; 

    // Simplify the dialog windows. 
    config.removeDialogTabs = 'image:advanced;link:advanced'; 

    // Whether to escape basic HTML entities in the document, including: 
    // (nbsp,gt,lt,amp) 
    config.basicEntities = false; 
    config.entities_additional = 'lt,gt,amp,quot' 
    config.entities_latin = false; 
    config.entities_greek = false; 
    config.disableNativeSpellChecker = false; 
    config.removePlugins = 'wsc,scayt'; 
    config.scayt_autoStartup = false; 
    config.height = 1000; 

    config.keystrokes = 
     [  
      [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 85 /*U*/, 'bold' ], 
      [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 73 /*I*/, 'h1' ], 
     ]; 
}; 

：

今のところ、これはどのように見えるか、私のconfig.jsのです。

Answer 1

HTMLページで、適用する見出しごとに新しいコマンドを作成する必要があります。 <h1>の場合：私は、キーボードショートカットを追加するには、2つの方法を示していますいくつかのコードを共有するつもりですので、

var editor1 = CKEDITOR.replace('editor1'); 
editor1.on('instanceReady', function(evt) { 
    evt.editor.addCommand('h1' , new CKEDITOR.styleCommand(new CKEDITOR.style({ element: 'h1' }))); 
    // other commands for 'h2', 'h3' etc 
    evt.editor.setKeystroke(CKEDITOR.CTRL + CKEDITOR.SHIFT + 85 /*U*/, 'h1'); 
    // other keystrokes for 'h2', 'h3', etc 
}); 

Answer 2

CKEditorバージョンのキーストロークの複雑さの周りに驚くほどのドキュメントがあります。

最初のアプローチは、config.jsファイルを編集するだけで、いくつかの要素に対して行うことができます。 2番目はカスタムプラグインを使用します。

CKEditorバージョン/ config.jsの

CKEDITOR.editorConfig = function(config) { 

    [ ... ] 

    /* This is the easy way to add keystrokes, but it only works for 
    * default commands like bold, italic, link (shown here), etc. 
    * This is the approach recommended in the ckeditor docs. 
    * 
    * @see: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.keystrokes 
    */ 
    config.keystrokes = [ [ CKEDITOR.CTRL + 75 /*K*/, 'link' ] ]; 

    /* It's hard to get keyboard shortcuts for elements that don't have 
    * default ckeditor commands - headings included. I created 
    * a simple plugin that lets me define additional shortcuts. The 
    * plugin needs to be declared as follows: 
    */ 
    config.extraPlugins = 'customkeyboardshortcuts'; 
}; 

これは非常に単純なプラグインであり、それが必要とするすべてである：

上記の例のようにconfig.jsのに追加さ

• プラグイン名に一致するディレクトリ名（例： "customkeyboardshortcuts"）
• jsファイルplugin.jsとfollowi ngの内容

CKEditorバージョン/プラグイン/ customkeyboardshortcuts/plugin.js

CKEDITOR.plugins.add('customkeyboardshortcuts', { 

    // The plugin initialization logic goes inside this method. 
    init: function(editor) { 

     /* The heading formats do not have ckeditor commands associated with them 
     * by default in ckeditor. We use a plugin to give them command names 
     * in order to set the keystrokes below. 
     * 
     * (If the headings had command names by default then we wouldn't need a plugin 
     * at all and could just take the "keystrokes" approach in config.js - see 
     * http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.keystrokes) 
     */ 
     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' }))); 

     /* Then we need to add a keystroke for the headings 
     * 
     * The hard part is finding a viable keyboard combination. In my 
     * tests I wasn't able to use any combination that included a number 
     * (regardless of which modifier keys I choose). The letters 'H' (for 
     * "heading") and 'F' (for "format") are reserved for OSX 'hide' and chrome 
     * 'find' respectively. Also the function keys don't work on a mac, and the 
     * 'fn' modifier key doesn't exist on a windows machine. 
     * 
     * I picked 'B' because h1 is _like_ bold, and gave h2 and h3 to 'V' and 
     * 'C' respectively because it feels like a fairly natural progression to 
     * me (even though it's kind of backwards). 
     */ 
     editor.setKeystroke(CKEDITOR.SHIFT + CKEDITOR.CTRL + 66 /* B */, 'h1'); 
     editor.setKeystroke(CKEDITOR.SHIFT + CKEDITOR.CTRL + 86 /* V */, 'h2'); 
     editor.setKeystroke(CKEDITOR.SHIFT + CKEDITOR.CTRL + 67 /* C */, 'h3'); 

    } 
}); 

そして感​​謝は右のトラックに私を取得するため@Wizardします。彼が彼のポストで言及したように、ckeditorがあるページにもJSを追加することができます。私はckeditor jsのインサートで私たちのビューファイルを荒らしたくないので、私のためにはうまくいきませんでしたが、それはあなたのために働くかもしれません。