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

我正在使用ckeditor5开发一个插件。我做了模式、转换器、事件和命令来在编辑器上插入插件块（一个表），它工作正常，但我不知道如何实现FocusCycler/FocusTracker，使用选项卡或回车来按照确定的顺序更改单元格焦点。我在哪里做？最好的方法是什么？

FocusTracker

和

FocusCycler

不是适合您的工具，因为它们是面向用户界面的帮助工具，您希望在内容中移动焦点

没有一台自动取款机能使任务更容易。您必须添加一个侦听器并编写自己的逻辑：

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( ... );
            } );
        }
    }
} );

---

FocusTracker

和

FocusCycler

不是适合您的工具，因为它们是面向用户界面的帮助工具，您希望在内容中移动焦点

没有一台自动取款机能使任务更容易。您必须添加一个侦听器并编写自己的逻辑：

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( ... );
            } );
        }
    }
} );

---

根据@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;
            }
        }
    }
});

---

根据@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;
            }
        }
    }
});

---

你想迭代什么？编辑器UI视图或编辑内容的某些项目？我想迭代我的插件块（表）的可编辑元素（td）。你想迭代什么？编辑器UI视图或编辑内容的某些项目？我想迭代我的插件块（表）的可编辑元素（td）。非常感谢，您的提示非常有用。我将在下面发布我的解决方案。非常感谢您，您的提示非常有用。我将在下面发布我的解决方案。