Question

我希望我的编辑能够使用键盘快捷键来应用标题。

我一直在ckeditor网站上试验"keystrokes" approach。它适用于某些事情，但不适用于标题。例如，以下内容使用 Ctrl + Shift + u 对“粗体”应用其他映射：

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

为什么我不能启用标题？

现在这就是我的config.js：

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' ],
        ];
};

我希望将我的更改限制在ckeditor目录下（理想情况下只在config.js中）。

Answer 1

您必须在HTML页面中为要应用的每个标题创建一个新命令。对于<h1>：

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文件即可对某些元素进行第一种方法。第二个使用自定义插件。

<强>的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
与插件名称匹配的目录名称（例如＆＃34; customkeyboardshortcuts＆＃34;）
一个名为plugin.js的js文件，内容如下：

<强>的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让我走上正轨。正如他在帖子中提到的，您可以将JS添加到ckeditor所在的页面。我不想用ckeditor js插入来查看我们的视图文件，所以这对我不起作用，但它可能适合你。

为标题启用ckeditor键盘快捷键？

2 个答案: