Имитация нажатия клавиши табуляции при нажатии другой клавиши внутри виджета CKEditor

Question

Я разрабатываю простой виджет CKEditor, который имеет таблицу с некоторыми редактируемыми полями и выполняет вычисления с этими значениями.Когда я показал его пользователю, он попросил, чтобы он изменил поля с помощью клавиши Enter вместо Tab .

По сути, это пример структуры виджета.(Мне нужно было поместить div в ячейки редактируемой таблицы, потому что я не мог сделать сами ячейки редактируемыми при инициализации плагина):

    '<div id="widget-wrapper">' +
                '<table>' +
                    '<tr>' +
                        '<td> Altura:</td>' +
                        '<td><div id="altura" class="edt single-line editable1"> </div> </td>' +
                        '<td> cm</td>' +
                    '</tr>' +

                    '<tr>' +
                        '<td> Peso:</td>' +
                        '<td><div id="peso" class="edt single-line editable2"> </div> </td>' +
                        '<td> kg</td>' +
                    '</tr>' +
                '</table>' +
    </div>

Когда я нажимаю Tab , я могу переключаться черездва редактируемых поля обычно.В документах я видел этот метод , который, кажется, делает то, что мне нужно.Поэтому я сделал это, чтобы сфокусировать следующий элемент, когда нажата клавиша Enter , но событие, похоже, ничего не делает:

 editor.on( 'key', function( event ) {
    activeElement = editor.document.getActive();
    keycode = event.data.keyCode;

    if(keycode == 13) {
        activeElement.focusNext();
    }

});

Есть ли другой способ сделать то, что мне нужно?

Answer 1

ваша функция почти готова к работе.Функция element.focusNext использует атрибут tabindex DOM Element для переключения между фокусируемыми элементами.Вы должны добавить этот атрибут в ваш выходной HTML.Кроме того, не забудьте включить этот атрибут в ACF , иначе он будет удален.

<div id="widget-wrapper">
  <table>
    <tr>
      <td> Altura:</td>
      <td><div id="altura" class="edt single-line editable1" tabindex="1"> </div> </td>
      <td> cm</td>
    </tr>
    <tr>
      <td> Peso:</td>
      <td><div id="peso" class="edt single-line editable2" tabindex="2"> </div> </td>
      <td> kg</td>
    </tr>
  </table>
</div>

Также я думаю, что это хорошая идея, чтобы отменить событие ввода, чтобы оно недобавьте новую строку при редактируемом изменении фокуса.

config.allowedContent = 'div(editable1,editable2)[tabindex]';
CKEDITOR.replace( 'editor', config );

editor.on( 'key', function( event ) {
  activeElement = editor.document.getActive();
  keycode = event.data.keyCode;

   if( keycode == 13 ) {
     activeElement.focusNext();
     event.cancel();
   }
} );

Имейте в виду, что путаница с событием ввода клавиши создаст важную проблему - ваши пользователи не смогут создать новую строку внутри редактируемого поля.

Пожалуйста, смотрите рабочий пример https://codepen.io/jacekbogdanski/pen/ERNmEj