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

Question

我正在使用 ckeditor5 开发一个插件。我执行了模式、转换器、事件、命令以在编辑器上插入插件块（table），它工作正常，但我不知道如何实现 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

How implement FocusCycler/FocusTracker in a ckeditor5 plugin

ckeditor

ckeditor5