Simulate tab keypress when another key is pressed inside CKEditor widget

Question

I'm developing a simple CKEditor widget that has a table with some editable fields and does calculations with those values. When I showed it to the user, he requested that he changes fields with the Enter key instead of Tab.

Basically, this is a sample of the widget structure (I needed to put divs inside the editable table cells because I could not make the cells themselves editable at the plugin initialization):

    '<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>

When I press Tab, I can switch through the two editable fields normally. In the docs, I saw this method that seems to do what I need. So I did this to focus the next element when the Enter key is pressed, but the event seems to do nothing:

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

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

});

Is there any other way to do what I need?

Answer 1

your feature is almost ready to go. element.focusNext function utilizes tabindex DOM Element attribute to switch between focusable elements. You should add this attribute to your output HTML. Also, don't forget to enable this attribute in ACF or it will be removed.

<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>

Also I think that it's good idea to cancel an enter event so it won't add new line on editable focus change.

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

Be aware that messing with enter key event will create an important issue - your users won't be able to create new line inside editable field.

Please, see working example https://codepen.io/jacekbogdanski/pen/ERNmEj