Question

我正在使用ckeditor5开发一个插件。我执行了模式，转换器，事件，命令以在编辑器中插入插件块（一个表），并且工作正常，但是我迷失了实现FocusCycler / FocusTracker来使用 TAB按照确定的顺序更改单元格焦点的方法或 ENTER 。我在哪里做？最好的方法是什么？

Answer 1

FocusTracker和FocusCycler并不是适合您的工具，因为它们是面向UI的帮助器，并且您希望将重点放在内容上。

没有可帮助您轻松完成任务的辅助ATM。您必须添加一个侦听器并编写自己的逻辑：

import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';

// ...

editor.editing.view.document.on( 'keydown', ( evt, data ) => {
    // Use data to learn which key has been pressed.
    if( data.keyCode == keyCodes.tab ) {
        // Learn where the selection is...
        // const range = editor.editing.view.document.selection.getFirstRange();

        // ...

        if ( ... ) {
            // To set a new selection in the next cell
            editor.editing.view.change( writer => {
                 writer.setSelection( ... );
            } );
        }
    }
} );

Answer 2

在@oleq提示之后，我使用Position和TreeWalker类找到了解决方案：

import {keyCodes} from '@ckeditor/ckeditor5-utils/src/keyboard';
import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
import ViewTreeWalker from '@ckeditor/ckeditor5-engine/src/view/treewalker';

editor.editing.view.document.on('keydown', (evt, data) => {
    evt.stop();
    if ( data.keyCode === keyCodes.enter ) {
        let current = editor.editing.view.document.selection.getFirstRange();
        let position = new ViewPosition(current.start.parent);
        let walker = new ViewTreeWalker({startPosition: position});
        for (let element of walker) {
            if ( element.type === 'elementStart' && element.item._attrs.get('editableElement') === 'true') {
                editor.editing.view.change(writer => {
                    writer.setSelection(element.item, 'in');
                });
                return;
            }
        }
    }
});

如何在ckeditor5插件中实现FocusCycler / FocusTracker

2 个答案: