CKEditor 5 Tab键缩进插件

CKEditor 5提供了IndentBlock可以用来做缩进，只需要在创建编辑器的添加IndentBlock即可。

import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Indent, IndentBlock, ... ],
        toolbar: {
            items: [ 'heading', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
        }
    } )
    .then( ... )
    .catch( ... );

但是在编辑器不能通过Tab键或Shift+Tab键进行缩进。需要我们自定义插件。

插件代码：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export default class IndentBlockTabObserver extends Plugin {
    static get pluginName() {
        return 'IndentBlockTabObserver';
    }
    constructor(editor) {
        super(editor);
    }
    init() {
        const editor = this.editor;
        editor.keystrokes.set( 'Tab', ( data, cancel ) => {
            const command = editor.commands.get( 'indentBlock' );
            if ( command.isEnabled ) {
                command.execute();
                cancel();
            }
        } );
   
        editor.keystrokes.set( 'Shift+Tab', ( data, cancel ) => {
            const command = editor.commands.get( 'outdentBlock' );
            if ( command.isEnabled ) {
                command.execute();
                cancel();
            }
        } );
    }
}

注意：这个插件依赖于IndentBlock插件